GSAP for React Animation
Write GSAP animations in React and Next.js with proper cleanup, scoping, and SSR safety
- Repository
- greensock/gsap-skills
- Stars
- 17,719
- Licence
- MIT
- Files
- 1 file
What it does
When installed, the agent follows GSAP's recommended patterns for adding animation to React and Next.js apps. It favors the useGSAP() hook so animations are cleaned up automatically when a component unmounts, scopes selectors to a component's own elements, and wraps event-handler animations so they don't leak. It also reminds the agent to keep animation code running only in the browser, not during server rendering.
Great for
- React or Next.js developers adding GSAP animations to components
- Developers reviewing existing GSAP code for memory leaks or unmount bugs
- Teams who want a standard, official pattern for GSAP in React
Skip it if
- Projects that don't use GSAP or React: the guidance is specific to these libraries and will not apply to plain CSS or other frameworks (Vue/Svelte are covered by a different skill)
- Complex scroll-based or timeline work on its own: the skill points to separate related skills for those topics, so it gives only partial coverage alone
Try asking
- “Add a staggered fade-in animation to the cards in my Next.js component using GSAP”
- “Review this useEffect that runs gsap.to and tell me if it leaks on unmount”
- “Make a click handler in my React button rotate an element with GSAP without breaking cleanup”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 1 original files, the MIT licence and an attribution note.
gsap-react.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip gsap-react.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip gsap-react.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Mention that you use React or Next.js in your request so the agent applies the right patterns.
- Ask the agent to check its generated code for a scope and cleanup, since the skill emphasizes both.
- Check the official GSAP React documentation linked in the skill if you need API details beyond these patterns.
What's inside
- SKILL.md
Redistributed unmodified from greensock/gsap-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.