gsap-react

Install gsap and @gsap/react, register the useGSAP plugin, then call useGSAP with your animation code and a ref as scope. The hook handles cleanup automatically on unmount, replacing manual useEffect-based setup.

The useGSAP hook reverts animations and ScrollTriggers automatically on unmount. If using gsap.context() inside useEffect instead, always return a cleanup function that calls ctx.revert() to kill tweens and revert inline styles.

GSAP runs only in the browser, so never call gsap or ScrollTrigger during SSR. Place all GSAP code inside useGSAP or useEffect so it executes client-side only; dynamic import inside useEffect is an option for bundle size concerns.

Animations created in event handlers after useGSAP runs are not added to its context, so they never get reverted. Wrap those callbacks with contextSafe from useGSAP and remove event listeners in the cleanup function.

Prefer useGSAP from @gsap/react since it handles cleanup, scope, and contextSafe automatically. Use gsap.context() inside useEffect only when @gsap/react is unavailable or you need specific effect dependency behavior, and always call ctx.revert() in cleanup.