Orchestrate GSAP animations in React with useGSAP and automatic cleanup.
npx skills add https://github.com/nnecec/nnecec.studio --skill gsap-react-nnecec
Please help me install this Agent Skill. Skill: gsap-react Source: https://github.com/nnecec/nnecec.studio/tree/main/.agents/skills/gsap-react Command: npx skills add https://github.com/nnecec/nnecec.studio --skill gsap-react-nnecec
Provides a clear, reusable pattern for animating React components using GSAP, emphasizing scoped animations, automatic cleanup on unmount, and SSR-safe practices to keep React apps smooth and safe.
Install gsap and @gsap/react, then import useGSAP and apply it to a component to start animating within a scoped container.
High-intent search queries and answers about installing and using this skill.
Use the useGSAP hook to handle GSAP animation cleanup automatically when a React component unmounts. It scopes animations to a specific container and ensures context-safe callbacks, preventing memory leaks without manual revert calls.
The best way to scope GSAP animations is using gsap.context() with container refs. This confines animations to a specific React component subtree, ensuring automatic cleanup and isolating selector text matches.
GSAP works with Next.js server-side rendering by applying client-only execution patterns. The useGSAP hook manages SSR considerations, ensuring animations execute safely on the client without causing hydration mismatches.
Yes, you need to install both the gsap and @gsap/react packages to use the useGSAP hook. This provides the official integration for orchestrating scoped animations with built-in unmount cleanup.
GSAP animations leak without scoped contexts during component unmount. Using the useGSAP hook or gsap.context() ensures automatic cleanup and context-safe callbacks, preventing these memory leaks in React apps.
kartojalAutomate GSAP animation setup in React with useGSAP and gsap.context.
skyf0xxIntegrate GSAP animations into React and Next.js with useGSAP hook and ref scoping.
AlejandroFiginiAutomate GSAP animation setup and cleanup for React components.
anis-marrouchiIntegrate Framer Motion with Remotion for frame-synced animations.
