GSAP's ScrollTrigger remains one of the most reliable ways to build performant scroll-driven effects. This article explains how to integrate GSAP with Next.js' App Router while avoiding hydration and layout-shift issues.
Topics include using `useEffect` to initialize animations on the client, scoping selectors to avoid global queries, and techniques for responsive scrubbed timelines. I cover common pitfalls (SSR hydration mismatches, layout thrash) and how to measure repaint costs with the Performance tab.
Code samples show a minimal `useScrollAnimation` hook that abstracts setup/teardown and supports server-safe rendering patterns.