What problem does it solve? GSAP animations in React often leak memory, target wrong elements across re-renders, or crash 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 never run during SSR. ## 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 mandatory ctx.revert() cleanup when @gsap/react is unavailable. - Context-Safe Callbacks: Wraps event-handler animations in contextSafe so late-created tweens are still reverted on unmount. - Use Case: You are building a Next.js landing page and want staggered entrance animations on a component. The Skill guides you to register useGSAP, pass a container ref as scope, and let cleanup run automatically without SSR errors. ## Quick Start Ask the AI to add a GSAP fade-in animation to a React component using the useGSAP hook with proper scoping and cleanup.
