gsap-scrolltrigger

Scroll-driven animations map animation progress to user scroll by configuring ScrollTrigger with a trigger element and start/end positions. This binds tweens and timelines directly to scroll input without manual scroll tracking.

Pinning elements during scroll holds a specific section in place while the user scrolls past it, creating immersive layouts. This is achieved by applying the pin property within the ScrollTrigger configuration.

GSAP ScrollTrigger supports horizontal scrolling and custom scrollers via containerAnimation for fake horizontal scroll and scrollerProxy for custom scroll integration. These allow mapping scroll progress to non-standard scroll containers.

Scrub links the animation's progress directly to the scroll position, causing the animation to move forwards and backwards as the user scrolls up and down. This creates smooth, controllable parallax effects tied to scroll velocity.

ScrollTrigger supports batch processing through ScrollTrigger.batch(), which allows you to trigger animations for multiple elements simultaneously as they enter the viewport. This optimizes performance for groups of similar elements.

Markers are needed during development to visually debug scroll animations by displaying start and end trigger points on the screen. They help fine-tune start/end configurations but are typically disabled in production.