React Integration (useGSAP)

The useGSAP hook from @gsap/react: scope, dependency arrays, contextSafe event handlers, automatic cleanup, scoped selectors, never animating state, and Next.js SSR.

useGSAP is a drop-in replacement for useEffect/useLayoutEffect that runs your GSAP code inside a gsap.context() and reverts that context automatically on unmount or when dependencies change. It is the only correct way to write GSAP in React — never hand-roll cleanup in a raw useEffect.

import gsap from 'gsap'
import { useGSAP } from '@gsap/react'

gsap.registerPlugin(useGSAP) // registering useGSAP silences the "no plugin" warning

Register Plugins Once

Register every plugin at module scope before first use — never inside a render or a loop. Unregistered plugins fail silently in production builds.