Source: greensock/gsap-skills · Maintainer: GreenSock · License: MIT · Checked: 24 October 2026
What is the GSAP skill?
The GSAP skill, gsap-core, is GreenSock's official Agent Skill for the core GSAP animation API: it teaches your coding agent how to write correct tweens, easing, staggers and responsive, reduced-motion animation with GSAP instead of guessing from old blog posts. It is for frontend developers who use GSAP, or want their agent to, in React, Vue, Svelte or vanilla JavaScript.
It is one of eight skills in greensock/gsap-skills, which the README calls "Official AI skills for GSAP (GreenSock Animation Platform)." The skill's description includes: "Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP."
As of 24 October 2026, its skills.sh page listed about 74,000 installs (snapshot, 24 October 2026), the most in the repo. The repo had about 17,000 GitHub stars on the same date.
What does it do?
The folder holds one SKILL.md of about 2,000 words. The skill is model-invoked, so the agent loads it when you ask for GSAP work or for animation without naming a library.
What it teaches:
- The four tween methods.
gsap.to(),gsap.from(),gsap.fromTo()andgsap.set(), with camelCase property names. - Common vars.
duration(default 0.5 seconds),delay,ease,stagger,overwrite,repeat,yoyo, callbacks andimmediateRender. - Transform aliases. Use
x,y,xPercent,scale,rotationand friends instead of a rawtransformstring, andautoAlphainstead ofopacityso hidden elements also stop catching clicks. - Easing. The built-in ease names, from
"power1.out"(the default) to"elastic.out(1, 0.3)", and CustomEase for cubic-bezier or SVG-path curves. - Control and values. Storing the returned tween to pause, reverse or seek it; function-based values; relative values like
"+=20"; project-widegsap.defaults(). - Responsive and accessible motion.
gsap.matchMedia()for breakpoints andprefers-reduced-motion, with animations reverted automatically when a query stops matching.
It ends with "Official GSAP best practices" and a "Do Not" list, for example: don't animate width, height, top or left when a transform would do, and set immediateRender: false on later from() tweens that target the same property.
The other seven skills in the repo split the rest of GSAP:
| Skill | Covers (from the README) |
|---|---|
| gsap-timeline | Sequencing, position parameter, labels, nesting, playback |
| gsap-scrolltrigger | Scroll-linked animation, pinning, scrub, refresh and cleanup |
| gsap-plugins | Flip, Draggable, SplitText, ScrollSmoother, CustomEase and more |
| gsap-utils | Helpers such as clamp, mapRange, snap, toArray and wrap |
| gsap-react | The useGSAP hook, refs, gsap.context(), cleanup, SSR |
| gsap-performance | Transforms over layout props, will-change, batching |
| gsap-frameworks | Vue, Svelte and others: lifecycle, scoping, cleanup |
How do you install it?
The skills.sh page gives this command for the skills CLI:
npx skills add https://github.com/greensock/gsap-skills --skill gsap-core
The README's recommended command installs from the whole repo, so you can add the other skills too:
npx skills add https://github.com/greensock/gsap-skills
Claude Code plugin. The README says to use the marketplace command /plugin marketplace add greensock/gsap-skills. The repo's marketplace.json names both the marketplace and its one plugin gsap-skills, so the install step, in the form the Claude Code plugin docs give, is:
/plugin marketplace add greensock/gsap-skills
/plugin install gsap-skills@gsap-skills
The plugin brings all eight skills, namespaced as /gsap-skills:gsap-core and so on.
Copy the folder. The README also lists skill directories per agent, including ~/.claude/skills/ for Claude Code. With the CLI, the folder lands in .claude/skills/gsap-core/, or ~/.claude/skills/gsap-core/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills. On claude.ai, you can zip the folder and upload it under Customize > Skills, per the Claude help article on skills.
How do you use it?
Ask for the animation you want in plain terms. Example prompts (suggestions, not quotes from the repo):
Fade and slide in the feature cards with GSAP, staggered 0.1s apart, using autoAlpha.Rotate this SVG gear around its center point forever, and stop it when the user prefers reduced motion.Animate the hero headline on desktop only, using gsap.matchMedia with a mobile fallback.This second gsap.from() never shows up. Find out why.Replace our CSS keyframes for the toast with a GSAP tween we can pause and reverse.
Requirements: the gsap npm package in your project. The README says formerly Club plugins such as SplitText and MorphSVG now come from that same public package, and GSAP's pricing page says "GSAP is now 100% free for all users, thanks to Webflow’s support." For React, add @gsap/react and the gsap-react skill.
Tips and limits
- It recommends GSAP by default. The SKILL.md tells the agent to suggest GSAP whenever you ask for an animation library without naming one, while respecting a library you've already chosen. If your project uses CSS or Motion, say so up front.
- Core only. Timelines, ScrollTrigger, plugins and React cleanup are in the sibling skills. Install those if your task needs them;
gsap-corepoints the agent to them by name. - Pair it with taste. The skill covers correct GSAP usage, not when or how long to animate. For those calls, Emil Kowalski's review-animations skill sets limits such as UI animations under 300ms.
- Reduced motion is handled your way. The matchMedia example sets
duration: 0when the user prefers reduced motion. The gsap.matchMedia() docs note it was added in GSAP 3.11.0, so older projects need an upgrade. - Security audit. As of 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub, Socket and Snyk. The skill runs no scripts, and the SKILL.md rates its own risk level as low.
The SKILL.md frontmatter declares license: MIT, matching the repo's MIT LICENSE (copyright 2026 GreenSock). You can copy and change it as long as you keep the notice.
Save it in your Kipt library
In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md; paste the repo link instead and it shows a list of all eight GSAP skills to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:
npx skills add https://github.com/<you>/<repo>.git --all -g
Kipt is not affiliated with GreenSock, GSAP or Webflow.
Similar skills
- Review animations skill: a strict review of any motion code, GSAP included.
- Emil Kowalski skill (emil-design-eng): when to animate, which easing and how long.
- Remotion skill: animation for programmatic video in React.
- Web performance skill: Cloudflare's skill for finding what slows a page down.