Getting the most from GSAP and ScrollTrigger in Next.js

GSAP and ScrollTrigger power many of the scroll-driven animations you see on modern sites. In a Next.js app, you need to load them on the client and clean up on unmount to avoid layout shifts and memory leaks.

Use dynamic imports for your animation components and run ScrollTrigger.refresh() after hydration and on resize. Pin your timeline to a trigger element and use scrub for buttery scroll-linked motion. Keep will-change and transform-heavy animations on their own layers to avoid repaints.

We use this approach across our animated sites so that animations feel smooth and the rest of the page stays performant. If you're planning a scroll-heavy experience, we can help you architect it—from hero sequences to staggered reveals and parallax sections.