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.

GSAP & ScrollTrigger Development Overview 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. Core Concepts The Basics: Tweens A tween is a single animation from point A to point B. Timelines: Sequencing Animations Timelines orchestrate multiple tweens in sequence or overlap. Position Parameter (Timeline Timing) Control when animations start within a timeline: ScrollTrigger Fundamentals Basic Scroll Animation Start & End Positions Format: "[trigger position] [viewport position]" Scrubbing (Scroll Synced Animation) Toggle Actions Control animation at four scroll points: Common patterns: Common Patterns 1. Fade In On Scroll 2. Pin Element While Scrolling 3. Horizontal Scroll Section 4. Parallax Effect 5. Scroll Triggered Timeline 6. Batch Animations (Multiple Elements) 7. Staggered Animations Integration Patterns With Three.js / WebGL With React (useGSAP Hook) Sharing Timeline in React Locomotive Scroll Integration Advanced Techniques Image Sequence Scrubbing Smooth Scroll to Element Conditional Animations (Media Queries) Performance Best Practices 1. Use will change CSS 2. Limit Repaints 3. Dispose of ScrollTriggers 4. Debounce Resize ScrollTrigger handles this automatically, but for custom resize logic: 5. Use invalidateOnRefresh For dynamic values that change on resize: Common Pitfalls 1. Multiple Tweens on Same Element 2. Not Using Loops for Multiple Elements 3. Forgetting to Register Plugins 4. Nested ScrollTriggers in Timelines Easing Reference ScrollTrigger Methods Resources This skill includes bundled resources: references/ api reference.md : Quick API reference (tween methods, timeline methods, ScrollTrigger properties) easing guide.md : Visual easing reference with use cases common patterns.md : Copy paste patterns for common scenarios scripts/ generate animation.py : Generate boilerplate GSAP code timeline builder.py : Interactive timeline sequence builder assets/ starter scroll/ : Complete scroll driven site template easings/ : Easing visualization HTML tool examples/ : Real world ScrollTrigger examples When to Use This Skill Use this skill when: Creating smooth web animations Building scroll driven experiences Implementing parallax effects Sequencing complex animations Animating DOM, SVG, Canvas, or WebGL Integrating animations with Three.js or React Building scrollytelling websites Creating interactive UI transitions For Three.js specific animations, also reference the threejs webgl skill. For React components with built in animations, reference the motion framer skill.

gsap-scrolltrigger