Guide · Agent skill
How to use the GSAP Web Animation agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The gsap skill is a reference guide that teaches an AI agent how to write GSAP (GreenSock) web animations, including timelines, easing, staggering and ScrollTrigger scroll effects. This guide explains what the skill does, how to install it, how to trigger it with natural requests, and what to check before using it. By the end you will be able to add the skill to your agent and ask for animated interfaces it can build.
GSAP Web AnimationMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the gsap skill ZIP from this page.
- 2Unzip the skill. Unzip the folder into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project.
- 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Add GSAP to your project. Install the gsap library, and the ScrollTrigger plugin if you need scroll effects, because the skill's code depends on them.
- 5Ask for the animation. Describe the effect in plain language, such as an entrance, a timeline or a pinned scroll section, and mention GSAP or the skill.
- 6Review and test. Run the generated code in your project and check scroll behaviour, especially after page changes.
What the gsap skill makes the agent do
The skill gives the agent patterns for GSAP, a widely used JavaScript animation library. When you ask for animated web interfaces, such as entrance effects, sequenced timelines or scroll-driven sections, the agent follows the skill's guidance on tweens, timelines, easing, staggering and ScrollTrigger.
The skill is text guidance. It contains code examples the agent can adapt to your project, but it does not run code itself.
- Tweens with gsap.to, gsap.from and gsap.fromTo
- Timelines that sequence several animations with labels and position parameters
- Easing such as power2.out and staggers across many elements
- Scroll-driven storytelling with ScrollTrigger, including pin and scrub
- Common fixes for janky or broken animations, such as animating transforms instead of layout properties
Install the gsap skill from the ZIP
Download the ZIP for the gsap skill from this page, then unzip it. Put the skill folder in one of two places: your home folder's skills directory for use everywhere, or a project's .claude/skills/ folder for use in one project only.
If you use the Claude apps instead, you can upload the skill under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Add the GSAP library to your project
The skill does not include the animation library. Your project needs GSAP itself, and the ScrollTrigger plugin if you want scroll effects. The skill's examples call ScrollTrigger after registering it with gsap.registerPlugin.
Without GSAP in the project, the code the agent writes will not run.
- Required: the gsap library
- Required for scroll effects: the ScrollTrigger plugin
gsap.registerPlugin(ScrollTrigger);Trigger the skill with natural requests
The skill is meant to be used when you need to add or debug GSAP animations in HTML, CSS, JS or React. Describe the effect you want in plain language and mention the kind of motion. The skill's own examples use the form Use $gsap to create a design, so naming the skill directly is also a reliable option.
If your requirements are vague, the skill asks you questions first: whether the site is static or an SPA, whether you need scroll-driven sections, and what performance limits apply such as mobile support or reduced motion.
- Entrance effect: Use $gsap to make the hero text and buttons fade and rise in with a stagger.
- Scroll section: Use $gsap to pin a story section and scrub a panel across as the user scrolls.
- Debugging: Use $gsap to fix ScrollTrigger animations that do not fire after navigation in my React app.
Examples of what you can build
The skill includes three recipes. A hero entrance staggers elements into view. A sequenced timeline runs the nav, title and call-to-action one after another with small overlaps. A scroll-scrub section pins a container and moves a panel as the user scrolls.
The skill folder also includes a demo with a prompt file, so you can see a full example brief and the matching reference page.
- Hero entrance using a stagger on elements marked with data-anim
- Sequenced page load timeline with overlapping positions such as -=0.2
- Pinned scroll story driven by ScrollTrigger with scrub
gsap.from(".hero [data-anim]", { y: 24, autoAlpha: 0, duration: 0.8, ease: "power2.out", stagger: 0.06 });Safety notes and limits
The skill runs no scripts and makes no network requests, according to its listing. It is a set of instructions and code examples, so you review the code the agent writes like any other code before you ship it.
The skill mentions reduced motion only as a question to ask. It does not build in reduced-motion handling, so check that yourself if your audience needs it. It also recommends running ScrollTrigger.refresh() after images load and cleaning up with gsap.context() in single-page apps.
- No scripts are run by the skill
- No network use is listed for the skill
- Reduced motion is a question to ask, not built-in behaviour
- Clean up animations on unmount in React with gsap.context()
What people use it for
- Adding staggered entrance animations to a landing page hero
- Building a multi-step page load sequence with a timeline
- Creating a pinned, scroll-driven product story
- Debugging ScrollTrigger animations that stop working after navigation in a React app
- Producing a dashboard-style interface with panel motion from a demo brief
Frequently asked questions
How do I install the gsap agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
Is the gsap skill free to use?
The skill is listed under the MIT licence. This page does not state pricing for GSAP itself, so check the GSAP licence terms for your own project.
Does the gsap skill need the GSAP library?
Yes. The skill is guidance and code examples only, so your project must include the gsap library, plus the ScrollTrigger plugin for scroll effects.
Does the gsap skill run scripts or use the network?
According to its listing, the skill runs no scripts and uses no network. It contains instructions and examples that the agent adapts for your project.
Can the skill make my animations accessible?
Not automatically. The skill only mentions reduced motion as a question to ask, so you need to add and test reduced-motion handling yourself.
When should I use GSAP instead of simple CSS transitions?
Use GSAP for sequenced timelines, staggers, and scroll-driven sections. The skill's listing notes that for simple CSS hover transitions, GSAP adds unnecessary weight.
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
This skill suits front-end developers and designers who want timeline, stagger and ScrollTrigger animations written for HTML, CSS, JavaScript or React projects. It is less useful if you only need simple CSS hover transitions or a guaranteed accessible motion setup, since you would have to add those yourself.
Download the skill