gsap-react

Install gsap and @gsap/react, register the useGSAP plugin, then call useGSAP with your animation code and a scope ref. The hook handles cleanup automatically on unmount, replacing manual useEffect and gsap.context() boilerplate.

useGSAP is a React hook from @gsap/react that wraps GSAP setup in a managed context. It accepts a callback plus an optional config object with dependencies, scope, and revertOnUpdate, and automatically reverts animations on unmount.

GSAP runs only in the browser and must not execute during SSR. Place all GSAP and ScrollTrigger code inside useGSAP or useEffect so it runs client-side only; dynamic imports inside effects are an option for bundle control.

Leaks happen when animations are created outside the GSAP context, such as in event handlers, or when ctx.revert() is missing from the effect cleanup. Wrap late-created animations in contextSafe and always return a cleanup that reverts the context.

Prefer useGSAP from @gsap/react since it handles cleanup, scoping, and contextSafe callbacks automatically. Use gsap.context() inside useEffect only when @gsap/react is unavailable, and always call ctx.revert() in the cleanup function.