What problem does it solve? GSAP animations in React often leak memory, target wrong elements, or break during SSR because developers skip cleanup, use unscoped selectors, or run GSAP during server rendering. This Skill provides the correct patterns for integrating GSAP with React and Next.js. ## Core Features & Use Cases - useGSAP Hook Patterns: Set up animations with the @gsap/react hook, including scope, dependency arrays, and revertOnUpdate configuration. - Safe Cleanup: Use gsap.context() with ctx.revert() in useEffect, and contextSafe() for callbacks created in event handlers after setup. - SSR Safety: Keep all GSAP and ScrollTrigger code client-only in Next.js and other server-rendered frameworks. - Use Case: When building a Next.js landing page with staggered entrance animations, apply this Skill to scope selectors to a container ref, wrap click-handler tweens in contextSafe, and ensure everything reverts cleanly on unmount. ## Quick Start Set up a GSAP animation in my React component using the useGSAP hook with a scoped container ref and proper cleanup on unmount.
