Gsap Scrolltrigger

This handles scroll-driven animations with GSAP's ScrollTrigger plugin. You get pinning for sticky sections, scrubbing that ties animation progress directly to scroll position, snap points for locking to specific scroll positions, and parallax effects with multi-layer support. The skill covers the whole range from basic fade-ins on scroll to complex horizontal scrollers and batch animations for staggering groups of elements. It's solid for landing pages, storytelling sites, or anywhere you need animations that feel physically connected to scrolling rather than just triggered by it. The scrub parameter is the real workhorse here, with smoothing options that let you control how tightly animations follow the scroll.

skills.sh installs: 610
GitHub stars: 9
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bbeierle12/skill-mcp-claude --skill gsap-scrolltrigger --agent claude-code

Installs into .claude/skills of the current project.

Files

GSAP ScrollTrigger

Scroll-driven animations and interactions.

Quick Start

npm install gsap

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

gsap.to('.box', {
  x: 500,
  scrollTrigger: {
    trigger: '.box',
    start: 'top center',
    end: 'bottom center',
    scrub: true
  }
});

Core Concepts

Basic ScrollTrigger

gsap.to('.element', {
  x: 200,
  scrollTrigger: {
    trigger: '.element',  // Element that triggers the animation
    start: 'top center',  // When trigger hits viewport center
    end: 'bottom center', // When trigger leaves viewport center
    toggleActions: 'play pause resume reset'
  }
});

Start/End Positions

// Format: "trigger-position viewport-position"
start: 'top center'      // Trigger's top hits viewport center
start: 'top 80%'         // Trigger's top hits 80% down viewport
start: 'center center'   // Trigger's center hits viewport center
start: 'bottom top'      // Trigger's bottom hits viewport top
start: 'top top+=100'    // Trigger's top hits 100px below viewport top