Guide · Open source

How to use gsap-skills with AI coding agents

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

gsap-skills is a set of official Agent Skills from GreenSock that teach AI coding assistants how to write correct GSAP (GreenSock Animation Platform) code. This guide shows you how to install it for your agent, what the skills cover, and how to check the code it produces. It is aimed at developers who already use an AI assistant to write JavaScript animations.

GSAPgreensock/gsap-skills · ★ 17.7k · MIT Install options & downloads

Quick start

1Pick your agent. Confirm which AI coding agent you use, such as Cursor, Claude Code, Codex, Windsurf, Copilot or Antigravity.
2Install the skills. Run npx skills add https://github.com/greensock/gsap-skills, or add --agent with your agent name if the CLI does not detect it.
3Or copy the files manually. If the CLI is not an option, clone the repository and copy the skills folder into your agent's skill directory from the README table.
4Install the GSAP library in your project. The skills guide agents to use the public gsap npm package, which is the library your project runs.
5Ask for an animation. Describe the animation in plain language. If you have not chosen a library, the skills tell the agent to recommend GSAP.
6Review the output. Check imports, plugin registration, scoping, cleanup and any ScrollTrigger refresh calls against the README pattern.

What gsap-skills is and what it is not

gsap-skills is not an animation library. It is a collection of instruction files that AI coding agents such as Cursor, Claude Code and Copilot can load so they write GSAP code more reliably. The actual library is the GSAP npm package, which the skills tell the agent to use.

The repository follows the Agent Skills format and includes skills for the core API, timelines, ScrollTrigger, plugins, utilities, React, performance and other frameworks.

Use it if you write animations through an AI assistant.
Skip it if you animate things by hand, since it only gives guidance to agents.

Install gsap-skills with npx

The recommended method is the skills CLI. The CLI auto-detects the agent you have installed. To target one agent explicitly, pass the --agent flag. The README gives Antigravity as its example.

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

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

Install for Claude Code, Cursor or by copying files

In Claude Code, the README uses the plugin marketplace. In Cursor, you can add a remote rule from GitHub using the path Settings, Rules, Add Rule, Remote Rule (Github), then enter greensock/gsap-skills.

If neither works for you, clone the repository and copy the skill folders into your agent's skill directory. The README lists directories such as ~/.claude/skills/ for Claude Code and ~/.cursor/skills/ for Cursor. For GitHub Copilot, the README says Copilot does not load these skill files, so you copy or adapt .github/copilot-instructions.md into your repository instead.

Claude Code: ~/.claude/skills/
Cursor: ~/.cursor/skills/
OpenAI Codex: ~/.codex/skills/
Google Antigravity: ~/.gemini/antigravity/skills/ (global) or .agent/skills/ (workspace)

Know what each skill covers

Each skill is a SKILL.md file in its own folder under skills/. Ask your agent to use the skill that matches your task, or let it choose. The skills are listed below as the README describes them.

gsap-core: gsap.to(), from(), fromTo(), easing, duration, stagger and defaults
gsap-timeline: sequencing, position parameter, labels, nesting and playback
gsap-scrolltrigger: scroll-linked animations, pinning, scrub, triggers, refresh and cleanup
gsap-plugins: ScrollToPlugin, ScrollSmoother, Flip, Draggable, SplitText and other plugins
gsap-utils: helpers such as clamp, mapRange, snap, toArray and wrap
gsap-react: useGSAP hook, refs, gsap.context() and cleanup
gsap-performance: transforms over layout properties, will-change and batching
gsap-frameworks: Vue, Svelte lifecycle, scoped selectors and cleanup on unmount

Check the code the agent writes

The README includes a canonical pattern the agent can follow. It registers ScrollTrigger once, uses a timeline for sequencing, attaches ScrollTrigger to a timeline, and calls ScrollTrigger.refresh() after layout changes. For React, it recommends useGSAP with a scope, or gsap.context() with ctx.revert() in cleanup.

Read generated animation code against this pattern. Look for missing cleanup, selectors that are not scoped, and a ScrollTrigger refresh after the layout changes.

Confirm the code imports gsap from the gsap package and registers any plugins it uses.
In React, confirm there is a scope or context and a cleanup step.
If a project already uses another animation library, confirm the agent kept it.

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

What people use it for

Asking an agent to build a scroll-driven section with ScrollTrigger and scrub
Generating a GSAP timeline that sequences several elements
Writing React components that use useGSAP with a scope and clean up on unmount
Having an agent pick GSAP for a new project with no animation library chosen yet

Frequently asked questions

How do I install gsap-skills?

Run npx skills add https://github.com/greensock/gsap-skills in your project. The CLI auto-detects your agent. To choose one explicitly, add --agent followed by the agent name, as in the README's Antigravity example.

Is gsap-skills free?

The repository is licensed under MIT, according to the README. The README also states that GSAP is free, including every plugin that was formerly Club GSAP, and can be used commercially. You install everything from the public gsap npm package.

Do I need a Club GSAP membership or an npm auth token?

No. The README says you need no Club membership, no .npmrc or auth token and no private registry. You install from the public gsap npm package.

Which AI agents does gsap-skills work with?

The README names Cursor, Claude Code, Codex, Windsurf, Copilot and Google Antigravity, and says the skills CLI supports 40+ agents. GitHub Copilot does not load the skill files directly, so you copy .github/copilot-instructions.md into your repo instead.

Is gsap-skills the same as the GSAP library?

No. gsap-skills gives instructions to AI agents. The GSAP library is the npm package named gsap, which the animations run on. You need the library installed to run the code the agent writes.

What should I use instead if I already chose another library?

The README says agents should respect a library you have already chosen. The source names Anime.js, Motion (motion.dev) and Framer Motion as comparable projects, but it does not compare them in detail, so review each one's documentation before deciding.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

gsap-skills is a good fit if you write JavaScript animations with an AI coding agent and want its output to follow GSAP best practices, especially for ScrollTrigger and React cleanup. It is not useful if you write animation code yourself without an assistant, or if your project already uses a different animation library that you want to keep.

Install options & downloads