Guide · Agent skill
How to use the GSAP Performance Guide agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The gsap-performance skill is an agent skill that gives an AI coding agent GSAP-specific performance guidance for web animations. It is written for front-end developers and reviewers who see dropped frames or stutter in GSAP code. After this guide you will know what the skill changes about the agent's behaviour, how to install it, how to ask for it, and where its limits are.
GSAP Performance Guidegreensock/gsap-skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the skill ZIP from this page.
- 2Unzip the skill. Unzip it so the gsap-performance folder with SKILL.md sits in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Describe your animation problem. Ask in plain language, mentioning GSAP, jank, FPS or smooth 60fps.
- 5Share your code. Paste the tweens, ScrollTriggers or markup involved so the agent can review them.
- 6Apply the suggested changes. Switch layout properties to transforms, add quickTo where values update often, and clean up off-screen animations.
- 7Test on a low-end device. Check the result on slower hardware, since the skill advises testing there.
What is an agent skill, and what does this one do?
An agent skill is a folder containing a SKILL.md file with instructions that an AI agent loads when a request matches the skill's description. This skill's SKILL.md is the only file in the package.
Once installed, the agent follows GSAP animation best practices when writing or reviewing web animations. It favours transform and opacity properties over layout-heavy ones such as width, height, top or left, and it suggests will-change only on elements that actually animate. It recommends gsap.quickTo() for frequently updated values such as mouse followers, and it advises on stagger, cleaning up off-screen animations, and limiting ScrollTrigger refreshes.
- Prefer x, y, scale, rotation and opacity over width, height, top, left, margin and padding.
- Use will-change in CSS only on elements that animate.
- Use stagger instead of many separate tweens with manual delays when the animation is the same.
- Use gsap.quickTo() for properties updated often, such as mouse-follower x and y.
- Pause or kill off-screen animations and call ScrollTrigger.refresh() only when layout changes.
How do you install the GSAP performance skill?
Download the ZIP file from this page and unzip it. You can install the skill in one of two ways.
For personal use across projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.
In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/ (available in all your projects).
- Project install: .claude/skills/ inside your project folder (shared with that project).
- Claude apps: Settings → Capabilities → Skills, then upload the skill.
How do you trigger the skill with natural requests?
You do not need a special command. The skill loads when your request matches its description, which covers optimizing GSAP animations, reducing jank, and questions about animation performance, FPS or smooth 60fps. Say what you are trying to achieve and mention GSAP where it is relevant.
The skill also points to related skills for other work: gsap-core and gsap-timeline for building animations, and gsap-scrolltrigger for ScrollTrigger performance.
- "My GSAP hero animation stutters on mobile. How do I get it to a smooth 60fps?"
- "Review this GSAP code for performance problems before I ship it."
- "Make this mouse-follower animation cheaper to run."
- "Why is my ScrollTrigger page janky when I resize the window?"
What does the agent do differently with the skill loaded?
When you ask for an animation, the agent is guided toward transform-based movement, so a request to move an element left becomes a request that uses x rather than left. When you ask for a review, it checks for the patterns the skill lists under Do Not, such as hundreds of overlapping tweens or will-change set on every element.
For frequently updated values, the skill shows a pattern using gsap.quickTo() with a single tween reused on each mousemove event. This is the example the agent is pointed toward for mouse followers.
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
document.querySelector("#container").addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});What does the skill need, and what are its safety notes?
The skill requires nothing beyond the agent that loads it. It does not run scripts and does not use the network. The package contains only SKILL.md, so there is no code to execute and nothing to configure.
Because it is only guidance, it will not produce a finished animation for you. It also does not replace profiling. Deep rendering or browser-engine debugging needs profiling tools rather than these general rules.
- Requires: nothing listed.
- Runs scripts: no.
- Uses network: no.
- Files: SKILL.md only.
- Licence: MIT.
Tips for getting the most from the skill
Give the agent real code and a symptom. The advice is most useful when it can see the tweens, the elements they target and where the jank appears. Test changes on low-end devices, since the skill itself recommends that for scrub values, ScrollTrigger and large numbers of tweens.
Keep the skill's scope in mind. It is specific to GSAP, so for a project that does not use GSAP it adds little beyond general web performance advice.
- Name the device or browser where the stutter happens.
- Share the relevant tween or ScrollTrigger code.
- Ask for a review before shipping, not only after a bug report.
- Verify results with a browser profiler, since this skill gives rules rather than measurements.
What people use it for
- Reviewing a scroll-driven landing page for jank before launch.
- Rewriting a mouse-follower effect to use gsap.quickTo() instead of new tweens on each move.
- Replacing left and top movement with x and y transforms in an existing animation.
- Checking that will-change is only applied to elements that actually animate.
- Auditing a page for stray tweens and ScrollTriggers that keep running after navigation.
Frequently asked questions
How do I install the gsap-performance skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
Is the GSAP performance skill free?
The skill is licensed under MIT, as stated on this page. The source does not mention pricing, so check the licence and the page for any further terms.
What does the skill require?
The source lists no requirements. It runs no scripts and uses no network. The package contains only SKILL.md.
Does this skill work for projects that do not use GSAP?
Not really. The advice is specific to the GSAP library. The guidance is general web performance advice, but the skill adds little outside GSAP projects.
Will this skill make my animation smoother automatically?
No. It gives guidance rather than ready-made effects, and it does not replace profiling. Deep rendering or browser-engine issues need profiling tools.
What should I use instead for a deep rendering problem?
For deep rendering or browser-engine debugging, use a browser profiler. This skill's rules are general and do not measure your page.
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 this skill if you build or review GSAP animations and notice stutter, especially on mouse followers, scroll-driven sections or low-end devices. Skip it if your project does not use GSAP, if you want a finished animation rather than guidance, or if you need to debug browser rendering, which calls for profiling tools.
Download the skill