gsap-scrolltrigger

Register the ScrollTrigger plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger object to any tween defining trigger element, start and end positions, and scrub or toggleActions. Use markers: true during development to visualize trigger positions.

Set pin: true inside the ScrollTrigger configuration along with start and end positions such as start: 'top top' and end: '+=500'. Use pinSpacing to control whether extra space is added, and anticipatePin: 1 for smoother pinning behavior.

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

Conflicts occur when multiple tweens animate the same property on one element. Fix this by using fromTo, setting immediateRender: false, or placing the tweens inside a single timeline with one ScrollTrigger attached to the timeline rather than individual tweens.

Yes, GSAP can tween any JavaScript object property, including Three.js camera positions, mesh rotations, and material opacity. Attach a ScrollTrigger with scrub to link those property changes to scroll position and call lookAt or render in onUpdate.

Avoid scrub when you want a one-time entrance animation independent of scroll speed; use toggleActions like 'play none none none' with once: true instead. Scrub is best for parallax, horizontal scroll, and scroll-synced storytelling.