gsap-scrolltrigger

Scroll-driven animations link element progress to scroll position using trigger elements, start and end positions, and scrub configurations. You specify a trigger element, define start/end points, and attach animations to respond directly to scroll progress.

Pinning sections for parallax effects uses ScrollTrigger's pin property to lock elements during a defined scroll range. This enables sticky sections and parallax storytelling by holding elements in place while the scroll progress advances through the specified end position.

Configuring start and end positions for scroll triggers involves defining scroll-based coordinates relative to the trigger element and the viewport. These positions dictate exactly when the scroll animation begins and completes, allowing precise control over reveal and pinning behaviors.

Scroll-based animations support complex layouts and integrations across different scroll containers using the containerAnimation and scrollerProxy features. This allows triggering and scrubbing animations within nested or custom scrolling areas rather than only the main window.

Refresh and cleanup semantics recalculate scroll positions after layout shifts and prevent memory leaks by removing inactive triggers. Proper cleanup ensures scroll animations remain accurate and performant when elements or containers change dynamically.

Batching triggered animations on scroll groups multiple elements to fire sequentially as they enter the viewport. This approach synchronizes scroll-based reveals across lists or grids, preventing performance issues from animating numerous elements simultaneously.