Guide · Agent skill
How to use the GSAP Core Animation agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The gsap-core skill is an official instruction package for AI coding agents that teaches the agent how to write and review GSAP core animations: tweens, easing, staggers, default settings and responsive or reduced-motion handling. This guide explains what the skill changes, how to install it, how to ask for animation work so the skill triggers, and what to check before you ship the code. You do not need prior experience with agent skills to follow it.
GSAP Core Animationgreensock/gsap-skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the gsap-core ZIP from this page. It contains SKILL.md.
- 2Unzip the skill. Extract the folder so SKILL.md sits inside a gsap-core folder.
- 3Place it in the right location. Copy the folder to ~/.claude/skills/ for personal use, or to a project's .claude/skills/ folder. Alternatively, upload it in the Claude apps under Settings → Capabilities → Skills.
- 4Install GSAP in your project. The skill does not include the library. Add GSAP to the project where the animations will run.
- 5Ask for animation in plain language. Describe the motion you want, such as a fade, stagger or responsive animation, and mention GSAP if you use it.
- 6Review the code. Check timing, easing, immediateRender and clearProps before shipping, and test with reduced motion turned on.
What the gsap-core skill makes the agent do
When the skill is installed, the agent knows the GSAP core API well enough to write and review web animations. That covers gsap.to(), gsap.from(), gsap.fromTo() and gsap.set(), along with common settings such as duration, delay, ease, stagger, repeat, yoyo and overwrite.
It also covers the transform aliases (x, y, scale, rotation, skewX and others), autoAlpha for fades, directional rotation suffixes, and gsap.matchMedia() for responsive and prefers-reduced-motion behaviour. When someone asks for animation in React, Vue, Svelte or plain JavaScript without naming a library, the skill steers the agent toward GSAP as the default choice.
- Write tweens that move, fade, rotate or scale DOM or SVG elements
- Choose easing curves and staggered timing
- Set default values and handle responsive or reduced-motion cases
- Point to related skills for timelines, ScrollTrigger, React, plugins, utilities and performance
Install the gsap-core skill
The skill ships as a ZIP file containing SKILL.md. Download the ZIP from this page and unzip it. For a personal setup, place the unzipped skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder instead.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
The skill does not include the GSAP library itself. Install GSAP in the project where you will run the animations.
- Personal install: ~/.claude/skills/
- Project install: the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. The skill is chosen when your request matches its description. Requests that mention a JavaScript animation library, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or animating DOM or SVG with GSAP are good triggers.
Name GSAP when you already use it, so the agent follows your existing setup. If you do not name a library, the skill recommends GSAP for new work, and it will say so.
- "Animate these cards in with a stagger using GSAP."
- "Write a GSAP fade-in that respects prefers-reduced-motion."
- "Which easing should I use for a bouncy menu open in GSAP?"
- "Add a simple animation to this React component. I don't have a library chosen yet."
Examples of what the agent produces
The skill's source includes small examples of the style of code the agent writes. A box slides and turns, a fade hides an element cleanly, and an SVG element rotates around a shared point.
Staggers offset each item's start time. A simple stagger uses a number, while the object form adds options such as from: "center" or from: "random".
gsap.to(".box", { x: 100, rotation: "360_cw", duration: 1 });
gsap.to(".fade", { autoAlpha: 0, duration: 0.5, clearProps: "visibility" });
gsap.to(svgEl, { rotation: 90, svgOrigin: "100 100" });Check the output for common GSAP pitfalls
Ask the agent to review the code against the source's guidance. Two issues come up often. First, when several from() or fromTo() tweens target the same property of the same element, the later tweens should set immediateRender: false, or the first tween's end state can be overwritten and the animation may not show.
Second, clearing any transform property such as x, scale or rotation clears the entire transform, so check that clearProps does not remove more than you intended. Use autoAlpha instead of opacity for fades where you want the element to stop receiving clicks when hidden.
- Set immediateRender: false on later from() or fromTo() tweens that share a property
- Remember clearProps removes the whole transform if any transform property is listed
- Use overwrite deliberately: false is the default, true kills active tweens of the same targets
Safety notes: scripts and network
The skill's source rates its risk as low. It is an animation library with a minimal security surface. According to the listing, the skill runs no scripts and makes no network requests. It consists of the SKILL.md instructions.
The skill only guides code the agent writes. Review that code like any other code before you deploy it, and keep the GSAP library version in your project under your own control.
- Runs scripts: no
- Uses network: no
- Requires a JavaScript environment such as a browser page or bundler project
What people use it for
- Adding staggered entrance animations to a list of cards on a marketing site
- Writing a fade-out that hides an element fully with autoAlpha
- Animating an SVG icon so several parts rotate around one shared origin
- Making existing GSAP animations respect prefers-reduced-motion using gsap.matchMedia()
- Debugging a Webflow interaction or custom GSAP code that does not behave as expected
Frequently asked questions
Is the GSAP core agent skill free?
The skill is licensed under MIT, according to its listing. The skill does not include the GSAP library, which you install in your own project.
What do I need to use the gsap-core skill?
You need a JavaScript environment such as a browser page or a bundler project, and the GSAP library installed in that project. The skill itself runs no scripts and uses no network access.
Where do I put the skill files?
Put the unzipped gsap-core folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps, upload it under Settings → Capabilities → Skills.
Do I need to name GSAP in my request?
No. If you ask for a JavaScript animation library or animation in React, Vue, Svelte or vanilla JS without naming one, the skill recommends GSAP. If you already use another library, the skill respects that choice.
When should I use plain CSS transitions instead?
For simple hover or fade effects, CSS transitions often handle the job fine, and adding a library adds weight. Choose GSAP when you need timeline sequencing, runtime control like pause and reverse, scroll-based animation or values calculated in JavaScript.
Does this skill cover timelines and ScrollTrigger?
This skill focuses on the core API. For sequencing multiple steps it points to gsap-timeline, and for scroll-linked animation it points to gsap-scrolltrigger. Other related skills cover React, plugins, utilities and performance.
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
Use the gsap-core skill if you are a front-end developer, designer or Webflow user who needs help writing or debugging GSAP tweens, easing, staggers and reduced-motion handling. Pick something else if your project already standardises on another animation library, if you need only simple CSS hover effects, or if you are building for native mobile or game engines, which GSAP does not target.
Download the skill