Scroll-based animations using GSAP ScrollTrigger plugin including pinning, scrubbing, snap points, and parallax effects. Use when creating scroll-driven animations, sticky sections, progress indicators, or parallax scrolling experiences.

GSAP ScrollTrigger Scroll driven animations and interactions. Quick Start Core Concepts Basic ScrollTrigger Start/End Positions Position Reference Value Description top Top edge center Center bottom Bottom edge 80% 80% from top +=100 Plus 100 pixels =50 Minus 50 pixels Scrub Animations Basic Scrub Smooth Scrub Scrub with Timeline Pinning Basic Pin Pin with Animation Pin Spacing Toggle Actions Action Syntax Action Values Action Effect play Play forward pause Pause resume Resume from paused reverse Play backward restart Restart from beginning reset Reset to start (no animation) complete Jump to end none Do nothing Snap Points Basic Snap Snap to Labels Snap Configuration Callbacks ScrollTrigger Callbacks Progress Based Updates Parallax Effects Basic Parallax Multi Layer Parallax Horizontal Scrolling Horizontal Section Markers (Development) Batch Animations Stagger on Scroll Batch Configuration Common Patterns Reveal on Scroll Progress Indicator Sticky Header Transform Temporal Collapse Patterns Countdown Scroll Reveal Scroll Based Time Dilation Effect Performance Tips Reference See gsap fundamentals for animation basics See gsap sequencing for timeline composition See gsap react for React integration with ScrollTrigger

gsap-scrolltrigger