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. - Cleanup and Context Safety: Use gsap.context() with ctx.revert() in useEffect, and wrap event-handler callbacks with contextSafe so animations created after setup are still reverted. - SSR-Safe Usage: Keep all GSAP and ScrollTrigger code inside client-only lifecycles for Next.js and other SSR frameworks. - Use Case: You are building a Next.js landing page and want staggered entrance animations on a component. This Skill guides you to register useGSAP, pass a container ref as scope, and let cleanup run automatically 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.
