ask-gsap

Register the ScrollTrigger plugin, then attach a scrollTrigger config to any gsap tween with trigger, start, end, and scrub values. For sequenced animations, create a gsap.timeline with a shared scrollTrigger and chain tweens with position offsets.

GSAP suits showcase-tier scroll-linked work like pinning, scrubbing, and text or SVG morphing. Use motion.dev for simple hover and tap states, page transitions with AnimatePresence, layout animations, and modal or toast enter and exit.

Create a LenisProvider client component that initializes Lenis in useEffect, runs its raf loop, and calls lenis.on('scroll', ScrollTrigger.update) to sync ScrollTrigger. Destroy the Lenis instance in the effect cleanup.

Animations leak when tweens and ScrollTriggers are not killed on unmount. Wrap all GSAP code in gsap.context() scoped to a ref and return ctx.revert() from useEffect to clean up every animation in that scope.

Not automatically. Check window.matchMedia('(prefers-reduced-motion: reduce)') and either set gsap.globalTimeline.timeScale(0) or disable all ScrollTriggers via ScrollTrigger.getAll().forEach(st => st.disable()).

Avoid GSAP for simple hover and tap feedback, page transitions, layout animations, and modal or toast enter and exit, where motion.dev is simpler. GSAP is justified for complex scroll-linked timelines, pinning, and morphing.