What problem does it solve? GSAP animations in React often cause memory leaks, stale animations on unmounted components, and SSR errors when developers use plain useEffect without proper cleanup. This Skill provides the correct patterns for integrating GSAP with React and Next.js so animations are scoped, reverted on unmount, and never run during server rendering. ## 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 tracked and cleaned up correctly. - SSR Safety: Keep all GSAP and ScrollTrigger code client-only in Next.js and other SSR frameworks. - Use Case: You are building a Next.js landing page and want staggered entrance animations on a card grid. This Skill gives you the useGSAP setup with a scoped container ref so the animation cleans up properly on route changes. ## Quick Start Set up a GSAP entrance animation in my React component using the useGSAP hook with a scoped container ref and proper cleanup.
