9 AI Skills for GSAP in Vue/Nuxt & React — Open Source Companion to Official gsap-skills

[iotron]

Hey everyone,

  We open-sourced 9 Claude Code skills that teach AI agents how to write optimised GSAP
  code in Vue/Nuxt and React — designed to complement the official greensock/gsap-skills.

  THE PROBLEM

  AI generates GSAP code that works but leaks memory, thrashes layout, and ignores
  accessibility. Orphaned tweens, opacity instead of autoAlpha, no overwrite: 'auto' on
  mousemove, transformPerspective set every frame. These skills fix that.

  WHAT'S IN IT

  setup → animate (orchestrator) → optimise → test
                  ↓
      scroll · interact · text · svg · vfx

1.   - gsap-setup — Framework-aware setup (Nuxt 3, Vue 3, React, Next.js)
2.   - gsap-animate — Orchestrator that picks the right sub-skill for your layout
3.   - gsap-scroll — ScrollTrigger reveals, parallax, pin+scrub, stacking cards, batch
4.   - gsap-interact — 3D tilt cards, spring physics, spotlight cursor, magnetic buttons
5.   - gsap-text — SplitText masked reveals, ScrambleText decode, kinetic char split
6.   - gsap-svg — DrawSVG, MorphSVG, circuit tree triple-layer animation
7.   - gsap-vfx — Glitch effect, marquee, rolling counters, floating, pulse rings
8.   - gsap-optimise — Performance audit with 25-point checklist + anti-patterns
9.   - gsap-test — Vitest cleanup, Playwright hooks, pre-launch checklist

  HOW IT COMPLEMENTS THE OFFICIAL SKILLS

  Official gsap-skills → WHAT GSAP can do (API reference, all frameworks)
  iotron skills → HOW to use GSAP well (patterns, optimisation, gotchas, Vue/Nuxt + React)

  Aligned with official guidance — will-change matches gsap-performance, autoSplit
  recommends the onSplit() pattern from gsap-plugins.

  GOTCHAS FROM PRODUCTION (THE HARD WAY)

  - autoSplit: true without onSplit() — ResizeObserver re-splits, invalidating element
  references
  - fill: 'transparent' not 'none' — 'none' is "unpainted" in SVG, GSAP can't interpolate
  it
  - overwrite: false on colocated per-word tweens — global overwrite: 'auto' kills
  ScrambleText when the y slide starts
  - ctx.revert() does NOT remove DOM event listeners — only kills tweens/ScrollTriggers
  - Await document.fonts.ready before SplitText.create() — prevents CLS from fallback
  measurements

  INSTALL

  /plugin marketplace add iotron/agent-skills
  /plugin install iotron-agent-skills

  Pair with official:
  /plugin marketplace add greensock/gsap-skills
  /plugin install gsap-skills

  GitHub: https://github.com/iotron/agent-skills — star if useful.

  Feedback welcome — what patterns or gotchas are we missing?
 

[GreenSock]

Hi @iotron Thanks for posting. 

 

Was it not sufficient to just use the official GSAP skills from https://github.com/greensock/gsap-skills? If you have suggestions, please feel free to make specific recommendations or submit a pull request. 👍

[iotron]

On 3/23/2026 at 5:43 AM, GreenSock said:

Hi @iotron Thanks for posting. 

 

Was it not sufficient to just use the official GSAP skills from https://github.com/greensock/gsap-skills? If you have suggestions, please feel free to make specific recommendations or submit a pull request. 👍

These skills are complimentary to the main gsap skills which focus on the main components/api in gsap. They are more about generating different types of animations that you can create with the main gsap skills with reference animations. As more reference animations are added this plugin will get more bigger, that's why its better being a seperate plugin.

[iotron]

Hello @GreenSock the framework specific implementations has been added to the official gsap skills https://github.com/greensock/gsap-skills/pull/3.

Our plugin has been renamed to https://github.com/iotron/gsap-cookbook and is now based on codepen examples from https://demos.gsap.com/ with the gsap official skill as internal dependency. PR with more animations will be appreciated. Thank you.

[NickWoodward]

We should definitely teach AI how to do the thing we've spent thousands of hours on.