What problem does it solve? Integrating GSAP animations into React or Next.js apps often causes memory leaks, stale animations on unmounted components, selector collisions across components, and SSR crashes. This Skill provides the correct patterns for setup, scoping, and cleanup so animations behave reliably in React's lifecycle. ## Core Features & Use Cases - useGSAP Hook Patterns: Replaces useEffect-based GSAP setup with the useGSAP hook, including scope, dependency arrays, and revertOnUpdate configuration. - Context-Safe Callbacks: Wraps event-handler animations in contextSafe so they are properly reverted on unmount, with correct event listener cleanup. - SSR-Safe Usage: Ensures GSAP and ScrollTrigger code runs only on the client in Next.js and other server-rendered frameworks. - Use Case: You are building a Next.js landing page with staggered entrance animations and scroll effects. Use this Skill to set up useGSAP with a scoped container ref, contextSafe click handlers, and automatic cleanup on unmount. ## Quick Start Set up a GSAP entrance animation in my React component using the useGSAP hook with a scoped container ref and proper cleanup.
