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: Set up animations with the @gsap/react useGSAP hook, including scope, dependency arrays, and revertOnUpdate configuration. - Cleanup and Context Safety: Apply gsap.context() with ctx.revert() in useEffect, and wrap event-handler callbacks with contextSafe so late-created animations are reverted. - SSR-Safe Usage: Keep all GSAP and ScrollTrigger code on the client in Next.js apps, avoiding server-render execution errors. - Use Case: When building a Next.js landing page with staggered entrance animations, use this Skill to scope selectors to a container ref, register useGSAP, and ensure all tweens revert cleanly on unmount. ## 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.
