Claude AI skill for professional GSAP animations. Provides expert guidance on Tweens, Timelines, ScrollTrigger, and other GSAP features.
npm install gsap-animation-helper-skillA modular Claude AI skill for creating professional animations with GSAP (GreenSock Animation Platform).
This is a Claude AI skill that extends Claude's knowledge for GSAP animations. It's designed with a modular structure for efficient agent usage - loading only the specific documentation needed for each query.
``
gsap-skill/
├── SKILL.md # Entry point with decision tree
├── plugins/
│ ├── scroll-trigger.md # ScrollTrigger plugin
│ ├── scroll-smoother.md # ScrollSmoother plugin
│ ├── split-text.md # SplitText plugin
│ ├── flip.md # Flip plugin
│ ├── draggable.md # Draggable + Inertia
│ ├── observer.md # Observer plugin
│ ├── draw-svg.md # DrawSVG plugin
│ ├── morph-svg.md # MorphSVG plugin
│ ├── motion-path.md # MotionPath plugin
│ ├── text-plugins.md # Text + ScrambleText
│ └── physics.md # Physics2D + PhysicsProps
├── frameworks/
│ ├── react.md # React + useGSAP hook
│ ├── nextjs.md # Next.js SSR handling
│ └── vanilla.md # Vanilla JS patterns
├── reference/
│ ├── core-methods.md # gsap.to, set, timeline, etc.
│ ├── utilities.md # gsap.utils methods
│ └── easing.md # All easing functions
└── examples/ # Code examples
1. Efficient - Load only what's needed (e.g., ScrollTrigger query → read plugins/scroll-trigger.md only)
2. Maintainable - Update individual plugins without touching everything
3. Scalable - Easy to add new plugins/frameworks
4. Token-efficient - ~150 lines per file instead of 1000+ in one file
1. Agent reads SKILL.md (entry point with decision tree)
2. Based on user's question, agent reads the relevant file(s)
3. Agent provides targeted, accurate answer
User: "How do I use ScrollTrigger with React?"
Agent:
1. Reads SKILL.md → sees decision treeplugins/scroll-trigger.md
2. Reads for ScrollTrigger infoframeworks/react.md
3. Reads for React patterns
4. Combines knowledge to answer
| Topic | File |
|-------|------|
| Basic animations | reference/core-methods.md |plugins/scroll-trigger.md
| Scroll animations | |plugins/scroll-smoother.md
| Smooth scrolling | |plugins/split-text.md
| Text effects | |plugins/draw-svg.md
| SVG drawing | |plugins/morph-svg.md
| Shape morphing | |plugins/motion-path.md
| Path animation | |plugins/flip.md
| Layout animation | |plugins/draggable.md
| Drag & drop | |plugins/observer.md
| Input handling | |plugins/physics.md
| Physics | |frameworks/react.md
| React | |frameworks/nextjs.md
| Next.js | |frameworks/vanilla.md
| Vanilla JS | |reference/easing.md
| Easing | |reference/utilities.md
| Utilities | |
`bash`
npm install gsap
Point Claude to the SKILL.md` file or include the skill in your Claude configuration.
- Official Docs: https://gsap.com/docs/v3/
- Cheatsheet: https://gsap.com/cheatsheet
- Easing Visualizer: https://gsap.com/docs/v3/Eases/
- Community: https://gsap.com/community/
This skill is MIT licensed.
Note: GSAP itself has its own licensing - core is free, some plugins require Club GSAP membership. See https://gsap.com/pricing/