gsap-scrolltrigger

Register the ScrollTrigger plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config object to your tween or timeline with trigger, start, and end properties. Use toggleActions for play/reverse behavior or scrub to link progress directly to scroll position.

Set pin: true in the scrollTrigger config and define an end value like "+=1000" to control pin duration. Animate children of the pinned element rather than the pinned element itself, and leave pinSpacing at its default true so layout does not collapse.

Yes, use the useGSAP() hook from the @gsap/react package to automatically revert and clean up ScrollTriggers when components unmount. Alternatively, manually kill instances in a useEffect cleanup with ScrollTrigger.getAll().forEach(t => t.kill()).

The horizontal tween used with containerAnimation must have ease: "none" so scroll position maps 1:1 to horizontal position. Any other easing breaks the synchronization between vertical scroll and horizontal movement.

Use scrub when animation progress should follow scroll position continuously, and toggleActions for discrete play/reverse behavior at trigger boundaries. Never combine both on the same ScrollTrigger; if both exist, scrub wins.