Automate scoped GSAP animations in React components with useGSAP cleanup.
npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-react-ditekmax
Please help me install this Agent Skill. Skill: gsap-react Source: https://github.com/DITEKmax/rutcampustrack/tree/main/.agents/skills/gsap-react Command: npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-react-ditekmax
React developers often need to animate UI elements without leaking animations or causing SSR issues. This skill provides a safe, scoped approach to GSAP animations in React, with automatic cleanup and clean integration with Next.js or other React frameworks.
Start by creating a container ref and calling useGSAP in your component to animate elements within that container.
High-intent search queries and answers about installing and using this skill.
To prevent memory leaks, use GSAP animations in React by applying the useGSAP hook or gsap.context within a useEffect to ensure automatic cleanup on component unmount.
The best way to scope GSAP selectors is to attach a container ref to the component and pass it as the scope, ensuring animations only target elements within that specific component.
GSAP works with Next.js if you run animations on the client-side to avoid SSR pitfalls. Client-side execution ensures proper scope, cleanup, and server-side rendering safety.
To clean up GSAP animations triggered by React event handlers, wrap the callback functions using contextSafe so they integrate properly with the component's animation cleanup lifecycle.
GSAP timeline animations break on unmount if they are not scoped properly. Using useGSAP automates lifecycle-based effects and provides reliable cleanup to prevent broken or orphaned animations.
kartojalAutomate GSAP animation setup in React with useGSAP and gsap.context.
mietheAdd responsive hover, tap, entrance, exit, and scroll animations to React and Next.js interfaces.
yequdesuAnimate UI components in Vue, Svelte, and non-React frameworks with GSAP lifecycle hooks.
wubq511Implement declarative web animations with Framer Motion and React.
