What problem does it solve? GSAP animations in React often leak memory, target wrong elements across re-renders, or break during server-side rendering because developers skip cleanup or misuse selectors. This Skill provides the correct patterns for integrating GSAP with React and Next.js so animations are scoped, reverted on unmount, and client-only. ## 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 late-created tweens are still reverted on unmount. - Use Case: When building a Next.js landing page with staggered entrance animations, apply this Skill to scope selectors to a container ref, register useGSAP, and avoid SSR errors and detached-node updates. ## Quick Start Ask the AI to add a GSAP fade-in animation to a React component using the useGSAP hook with a scoped container ref and proper cleanup.
