GSAP AI Skills

1. What is GSAP Skills?

GSAP Skills is not an app you open and click around in. It is the official set of "skills" written by the GSAP team to teach AI coding assistants (Cursor, Claude Code, Codex, Windsurf, GitHub Copilot, Google Antigravity and others) how to write web animations with GSAP correctly. GSAP (GreenSock Animation Platform) is a JavaScript library for motion on web pages: text sliding in, elements moving as you scroll, sequences that play one after another.

To be plain about it: this repository is for people building websites, including beginners who let an AI write the code. The skills themselves are just text files with instructions. Once installed, your AI assistant reads them and writes GSAP code the way the GSAP team recommends instead of guessing.

On cost: the skills are free (MIT license). According to the repository, GSAP itself is also completely free, including plugins that used to be paid such as SplitText and MorphSVG, and that covers commercial use.

A good fit if:

• You are building a website with an AI coding assistant and want polished motion.
• You have asked an AI for animations before and got stutter, broken sequences or errors when navigating between pages.
• You work with React, Vue, Svelte or plain JavaScript.

Not a fit if:

• You do not build websites and do not use an AI coding assistant. After installing there is nothing to open.
• You want a drag-and-drop animation tool that never shows you code.

2. What you need

• An AI coding assistant already installed, such as Cursor, Claude Code, Codex, Windsurf, Copilot or Google Antigravity. Each has its own pricing; check its official site. GSAP Skills adds no charge.
• A web project folder on your computer (a brand-new one is fine).
• Node.js: the runtime that lets JavaScript tools run on your computer. It comes with the npx command, which runs the skills installer. Free download at https://nodejs.org
• Git (only for the manual method in Step 4): a tool for downloading source code from GitHub. Get it at https://git-scm.com

Windows, macOS and Linux all work. Disk space is negligible because these are a handful of text files. GSAP Skills itself needs no account and no API key.

The repository does not publish numbered releases (there is no Releases page). You always install whatever is on the main branch; at the time of writing it was last updated on 29 July 2026.

3. Step-by-step installation

There are four routes. Pick the one that suits your tool. Step 2 is the method the GSAP team recommends and it covers the widest range of assistants.

Step 1: Check Node.js

Open a terminal (PowerShell on Windows) and type:

node --version

What success looks like: a version number starting with v. If the command is not found, install Node.js from https://nodejs.org and open a fresh terminal window.

Step 2: Install with one command (recommended)

In the terminal, move into your web project folder and run:

npx skills add https://github.com/greensock/gsap-skills

The installer detects which AI assistant you have. On the first run npx may ask permission to download the skills tool; say yes. Then follow the on-screen questions to choose the skills and where to install them.

To target one assistant explicitly, add --agent and its name. For Google Antigravity, for example:

npx skills add https://github.com/greensock/gsap-skills --agent antigravity

What success looks like: the installer reports that the skills were added. Confirm with:

npx skills list

The list should include names starting with gsap-, such as gsap-core, gsap-timeline and gsap-scrolltrigger.

Step 3: No-terminal route for Cursor and Claude Code

Cursor: open Settings, go to Rules, choose Add Rule, then Remote Rule (Github) and enter:

greensock/gsap-skills

Claude Code: in the Claude Code prompt, type this to add the GSAP skills marketplace:

/plugin marketplace add greensock/gsap-skills

What success looks like: Cursor shows a new rule pointing at greensock/gsap-skills; Claude Code confirms the marketplace was added.

Step 4: Manual copy (when the routes above are not available)

Download the repository:

git clone https://github.com/greensock/gsap-skills.git

Then copy the folders inside the repository's skills/ directory into your assistant's skills directory:

AI assistant	Skills directory
Claude Code	~/.claude/skills/
Cursor	~/.cursor/skills/
OpenCode	~/.config/opencode/skills/
OpenAI Codex	~/.codex/skills/
Google Antigravity	~/.gemini/antigravity/skills/ (global) or .agent/skills/ (per project)
Pi	~/.pi/agent/skills/

The ~ means your personal home folder. On Windows that is a folder like C:\Users\your-name.

What success looks like: the skills directory contains eight folders named gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-react, gsap-performance and gsap-frameworks, each holding a SKILL.md file.

Step 5: GitHub Copilot only

Copilot does not load Cursor- or Claude-style skill files. To give Copilot the GSAP guidance, copy the repository's .github/copilot-instructions.md file (and, if you like, the .github/instructions/ folder) into the same location in your own project.

4. First use

The skills are instructions for the AI. Your project still needs the GSAP library itself. If it is not there yet, install it from your project folder (or ask your assistant to do it):

npm install gsap

You do not need a Club GSAP membership, an auth token or a private registry; everything is in the public gsap package.

Now open your AI assistant in the project folder and try a concrete request in plain language:

Use GSAP to animate the hero section: the headline fades up from below,
the three product cards appear one after another, and the background
image drifts slowly as the page scrolls.

Good output usually shows these signs in the code the AI writes:

• It imports gsap, and if scroll effects are involved it registers ScrollTrigger with gsap.registerPlugin.
• Sequenced motion is grouped into a "timeline" rather than separate calls with hand-tuned delays.
• In a React project it uses useGSAP with a scope and cleans up when the component goes away.
• Movement uses properties such as x, y and autoAlpha rather than changing page layout.

The eight skills and what each one covers:

Skill	Teaches the AI about
gsap-core	Basic animation calls, duration, easing, stagger
gsap-timeline	Sequencing, labels, nesting
gsap-scrolltrigger	Scroll-linked animation, pinning, cleanup
gsap-plugins	Plugins such as Flip, Draggable, SplitText, ScrollSmoother and more
gsap-utils	GSAP's helper functions
gsap-react	React usage: useGSAP, cleanup, SSR
gsap-performance	Keeping animations smooth
gsap-frameworks	Vue, Svelte and other frameworks

The repository also has an examples/ folder with minimal demos (plain JavaScript and React). You can read them on GitHub to see what correct code looks like.

5. Common problems and fixes

Symptom	Cause	Fix
Typing npx gives "command not found"	Node.js is not installed, or the terminal was not reopened after installing it	Install Node.js from https://nodejs.org , close and reopen the terminal, then run node --version again
The installer does not detect your assistant, or installs into the wrong one	Several assistants on the machine, or yours was not recognised	Rerun the Step 2 command with --agent and the assistant you want
Installed, but the AI writes the same code as before	The open session has not loaded the new skills, or your request did not mention GSAP	Start a new chat session and say "use GSAP" in the request. Check with npx skills list that the skills are present
Copilot ignores the GSAP guidance	Copilot does not read skill files	Follow Step 5 and copy .github/copilot-instructions.md into your project
git clone says git is not found	Git is not installed	Install Git from https://git-scm.com , or use Step 2, which does not need Git
The AI asks for a Club GSAP account, a token or an .npmrc file to install a plugin	It is relying on outdated information from when some plugins were paid	Tell it all plugins are now free and ship in the public gsap package; no sign-up or token is required
Scroll effects trigger in the wrong place after page content changes	The layout changed but ScrollTrigger has not recalculated	Ask the AI to call ScrollTrigger.refresh() after layout changes; this is the approach documented in the repository

6. Uninstalling and updating

If you installed with npx skills (Step 2), use the same tool.

Update to the latest content:

npx skills update

Remove skills (the tool lets you pick from what is installed):

npx skills remove

If you copied the files by hand (Step 4): to uninstall, delete the eight gsap-... folders from your assistant's skills directory. To update, download the repository again and copy over the old folders.

If you added it through Cursor (Remote Rule) or Claude Code (marketplace): remove or update it from that tool's own rule or plugin management screen.

For Copilot: delete the .github/copilot-instructions.md file you copied into the project.

Removing the skills does not touch code you have already written and does not remove the GSAP library from your project.

7. Frequently asked questions

Does it cost anything? The skills are free (MIT). According to the repository, GSAP and all of its plugins are free as well, commercial use included. The only thing you may pay for is your AI assistant.

Does it need an internet connection? Yes during installation, to download the files from GitHub. After that the files live on your computer. Your AI assistant still needs the network the way it always does.

Is any of my data sent anywhere? The skills are text files; they do not run or transmit anything. The skills installer does collect anonymous usage telemetry; according to that tool's documentation you can switch it off by setting the environment variable DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1.

Is it safe? The repository rates its own risk level as low, since GSAP is an animation library with a small security surface.

Can I use it if I cannot code? Yes, provided you are having an AI coding assistant build a website for you. You describe the effect in words, the AI writes the code, and the skills make that code more likely to be correct. If you are not building a website, you do not need this yet.