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: Set up animations with the @gsap/react useGSAP hook, including scope, dependency arrays, and revertOnUpdate configuration. - gsap.context() Fallback: Use gsap.context() inside useEffect with ctx.revert() cleanup when @gsap/react is unavailable. - Context-Safe Callbacks: Wrap event-handler animations in contextSafe so they are reverted on unmount instead of leaking. - SSR Safety: Keep all GSAP and ScrollTrigger code client-only in Next.js applications. - Use Case: You are building a Next.js landing page with scroll-driven hero animations. Use this Skill to write useGSAP-based components with scoped refs that clean up correctly on route changes. ## Quick Start Set up a GSAP fade-in animation in my React component using the useGSAP hook with a scoped container ref and proper cleanup.
