gsap-scrolltrigger

To create scroll-driven animations with GSAP ScrollTrigger, install GSAP, register the ScrollTrigger plugin, and attach a scrollTrigger configuration object to your tween or timeline to define the trigger, start, and end points.

The best way to pin elements for sticky sections using GSAP is to use the ScrollTrigger plugin's pinning feature, which attaches elements to the viewport during a defined scroll range without requiring manual scroll position math.

Scrubbing animations in GSAP ties animation progress directly to scroll position, allowing the timeline to play forward and backward as the user scrolls up and down the page for smooth, performant parallax effects.

You can debug start and end points for scroll animations by enabling the optional markers property in your ScrollTrigger configuration, which visually overlays indicators on the page to help fine-tune trigger positions.

GSAP ScrollTrigger works with React by registering the plugin and attaching the scrollTrigger configuration to timelines within component effects, enabling scroll-based effects and pinned sections across desktop and mobile environments.