What problem does it solve? GSAP animations in React often leak memory, target wrong elements across re-renders, or break during server-side rendering. This Skill provides the correct patterns for integrating GSAP with React and Next.js so animations are scoped, cleaned up on unmount, and run only on the client. ## Core Features & Use Cases - useGSAP Hook Patterns: Replaces useEffect with the useGSAP hook from @gsap/react, including scope, dependency arrays, and revertOnUpdate configuration. - gsap.context() Fallback: Shows how to use gsap.context() inside useEffect with ctx.revert() cleanup when @gsap/react is unavailable. - Context-Safe Callbacks: Wraps event-handler animations in contextSafe so they are properly reverted on unmount. - SSR Safety: Ensures GSAP and ScrollTrigger code never executes during server rendering in Next.js. - Use Case: When building a Next.js landing page with scroll-triggered animations, apply this Skill to scope selectors to component refs, clean up ScrollTriggers on unmount, and avoid React warnings from updates on detached nodes. ## Quick Start Set up a GSAP fade-in animation in my React component using the useGSAP hook with proper scoping and cleanup.
