gsap-scrolltrigger

Register the ScrollTrigger plugin, then add a scrollTrigger config object to a gsap.to or gsap.from call with trigger, start, end, and scrub properties. The animation then plays or scrubs based on the element's position relative to the viewport.

Use ScrollTrigger.create with pin: true, a trigger element, a start position like "top top", and an end value such as "+=500" to pin for 500 pixels of scrolling. Set pinSpacing to control whether extra space is added.

Yes, GSAP works with React through the useGSAP hook from @gsap/react, which handles scoping and cleanup. Register ScrollTrigger, create animations inside useGSAP with a container ref scope, and tweens are reverted automatically on unmount.

Two tweens targeting the same property on one element cause jumps because the second overwrites the first. Fix it with fromTo, immediateRender: false, or by placing both tweens in a single timeline with one ScrollTrigger.

Use ease: "none" for scrubbed scroll-driven animations so the user controls the speed. For standard UI animations, power2.out is the default choice, while back.out(1.7) suits playful entrances.

Yes, GSAP can tween Three.js camera positions, mesh rotations, and material properties by targeting their numeric properties directly. Attach a ScrollTrigger with scrub to link the 3D animation to scroll position.