Comprehensive skill for GSAP (GreenSock Animation Platform) and ScrollTrigger plugin. Use this skill when creating web animations, scroll-driven experiences, timelines, tweens, scroll-triggered animations, pinning, scrubbing, parallax effects, or animating DOM elements, SVG, Canvas, WebGL, or Three.js. Triggers on tasks involving GSAP, ScrollTrigger, smooth animations, scroll effects, or animation sequencing.
GSAP (GreenSock Animation Platform) is the industry-leading JavaScript animation library for creating high-performance, production-quality animations. ScrollTrigger is GSAP's powerful plugin for scroll-driven animations. Together, they enable everything from simple UI transitions to complex scroll-based storytelling experiences.
Use this skill when:
For Three.js-specific animations, also reference the threejs-webgl skill. For React components with built-in animations, reference the motion-framer skill.
This SKILL.md is the routing layer. Detailed recipes, examples, integration notes, and troubleshooting guidance live in references/details.md so they are loaded only when the task needs them.
Before producing concrete output, making a design recommendation, or debugging an implementation, load the relevant reference section below. Do not rely on memory for branch-specific APIs, examples, or caveats.
| Task branch | Read first |
|---|---|
| Core Concepts | references/details.md#core-concepts |
| ScrollTrigger Fundamentals | references/details.md#scrolltrigger-fundamentals |
| Common Patterns | references/details.md#common-patterns |
| Integration Patterns | references/details.md#integration-patterns |
| Advanced Techniques | references/details.md#advanced-techniques |
| Performance Best Practices | references/details.md#performance-best-practices |
| Common Pitfalls | references/details.md#common-pitfalls |
| Easing Reference | references/details.md#easing-reference |
| ScrollTrigger Methods | references/details.md#scrolltrigger-methods |
| Resources | references/details.md#resources |