GSAP AI Skills

GSAP AI Skills is the official set of agent skills from GreenSock that teaches AI coding assistants how to write correct, modern, production-ready GSAP code. Instead of guessing from stale training data, your agent follows GreenSock's own guidance for the core API, timelines, ScrollTrigger, plugins, and framework integrations.

What is GSAP?

GSAP (the GreenSock Animation Platform) is the industry-standard JavaScript animation library, used on millions of sites for high-performance UI animation, scroll-driven effects, SVG morphing, and complex sequencing. As of GSAP 3 — and following Webflow's acquisition of GreenSock — the entire toolset, including formerly paid plugins like SplitText and MorphSVG, is 100% free, including for commercial use.

What the skills teach your agent

• Core tweens & the GSAP 3 API — gsap.to(), gsap.from(), gsap.fromTo(), gsap.set(), eases, and stagger, using the modern syntax (no deprecated TweenMax / TimelineMax).
• Timelines — sequencing with position parameters, labels, nesting, and full playback control.
• ScrollTrigger — scroll-driven animation, pinning, scrubbing, snapping, and responsive, properly-cleaned-up triggers.
• Plugins — SplitText for text animation, MorphSVG, MotionPathPlugin, Flip for state transitions, DrawSVG, and Observer.
• Framework integration — idiomatic GSAP in React (including the useGSAP() hook), Next.js, Vue, Svelte, and vanilla JS, with the cleanup needed to avoid memory leaks.
• Performance & accessibility — animating transforms and opacity over layout properties, batching, and honoring prefers-reduced-motion.

How it works

The skills follow the open Agent Skills format and install through the skills CLI. Once added, your agent loads the relevant skill on demand: ask it to "pin this section and fade in the cards on scroll," and it reaches for the ScrollTrigger skill and writes code that actually runs.

Who it's for

Front-end and full-stack developers using AI coding agents — Claude Code, Cursor, GitHub Copilot, Codex, Windsurf, and 40+ others — who want animation code that matches GSAP's current best practices instead of patterns deprecated years ago.

What you can build

Scroll-driven storytelling, hero animations, animated SVG logos, page and route transitions, interactive product showcases, data-visualization motion, and polished micro-interactions — generated correctly on the first try.

Why it matters

Most language models were trained on years of mixed-quality GSAP examples, including the deprecated TweenMax era and Club-GSAP install instructions that no longer apply. These skills replace that noise with GreenSock's authoritative, current guidance, so your agent stops inventing APIs that don't exist and stops telling you to buy plugins that are now free.

1. Add the skills to your agent

Use the skills CLI to install the GSAP skills into your coding agent:

npx skills add greensock/gsap-skills

This works with Cursor, Claude Code, Codex, Windsurf, Copilot, and 40+ other agents.

2. Install GSAP in your project

npm install gsap

Every plugin (SplitText, MorphSVG, and the rest) ships in the public gsap package — no Club membership, no auth token, and no private registry.

3. Use it

Ask your agent for the animation you want — for example, "fade in and stagger these cards on scroll" — and it applies the correct ScrollTrigger and timeline patterns from the skill.