Integrate GSAP animations in React with scoped contexts and automatic cleanup.
npx skills add https://github.com/DanielV-94/rg-medium --skill gsap-react-danielv-94
Please help me install this Agent Skill. Skill: gsap-react Source: https://github.com/DanielV-94/rg-medium/tree/main/.agents/skills/gsap-react Command: npx skills add https://github.com/DanielV-94/rg-medium --skill gsap-react-danielv-94
React animation in modern apps can be error-prone and SSR-unsafe; this skill provides a safe pattern using GSAP for React to ensure proper cleanup and scoped animations.
Install GSAP and @gsap/react, then use the useGSAP hook inside a component to create scoped, cleanup-ready animations.
High-intent search queries and answers about installing and using this skill.
You scope GSAP animations by using gsap.context() within the useGSAP hook, which restricts selectors to a specific container and automatically handles cleanup when the component unmounts.
GSAP animations break on unmount due to improper cleanup. Using the @gsap/react package provides the useGSAP hook, which automatically handles context cleanup and prevents memory leaks when components are destroyed.
Yes, GSAP works safely with Next.js SSR when using gsap.context() and the useGSAP hook, which provide scoped animations and prevent server-side rendering issues by isolating DOM interactions to the client component lifecycle.
The best way to animate modals safely is using the useGSAP hook with gsap.context(), which isolates animation scopes and ensures automatic cleanup when the modal component closes or unmounts.
Yes, you need the @gsap/react package to use the useGSAP hook, which provides automatic cleanup and scoped animations without requiring manual effect cleanup in every React component.
R1ve3raaTechIntegrate GSAP animations with React using setup, cleanup, and context handling guidelines.
Bharathadi01Orchestrate GSAP animations in React components with useGSAP and scoped refs.
0monishImplement GSAP animations in React with useGSAP hook and cleanup.
DanielV-94Create web UI animations with Framer Motion, CSS keyframes, and GSAP.
