GSAP Performance skill for Claude Code: keep animations at 60fps

Official GSAP skill that makes Claude write animation code that stays smooth, for developers who see jank in GSAP animations.

Installs: 73.9K; on skills.sh
Stars: 17.7K; on GitHub
Updated: Jul 2026; last repo commit

When you ask about animation speed, jank or smooth 60fps, Claude loads this skill and follows its rules. It animates transforms and opacity instead of width, height, top and left. It adds will-change only to elements that really move. It uses stagger instead of many delayed tweens, and gsap.quickTo() for values that update all the time, such as a mouse follower.

It is one text file and bundles no scripts. The SKILL.md says to use it "when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps."

Good for

Front-end developers whose GSAP animations stutter
Developers building mouse followers or animated long lists
Reviewers checking animation code before release

Install gsap-performance

Claude Code

Copy this prompt.

Install the gsap-performance skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.

Sections in SKILL.md

When to Use This Skill
Prefer Transform and Opacity
will-change
Batch Reads and Writes
Many Elements (Stagger, Lists)
Frequently updated properties (e.g. mouse followers)
ScrollTrigger and Performance
Reduce Simultaneous Work
Best practices
Do Not

Key facts

Author: GreenSock (GSAP)
Repository: greensock/gsap-skills
Installs on skills.sh: 73,905 (2 Nov 2026)
GitHub stars (repo): 17,689 (2 Nov 2026)
License: MIT
Last commit (repo): 29 Jul 2026
What installs: SKILL.md only (1 file); bundles no scripts
Works in: Claude Code, Cursor, Codex, OpenCode, Google Antigravity and Pi (skill folders listed in the README); 40+ more through the skills CLI
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Animate x, y, scale, rotation and opacity, not width, height, top or left
Transforms and opacity avoid layout and most repaint work. Claude swaps layout-heavy properties for a transform when the look is the same.
Read · Prefer transform and opacity
Hint the browser only on elements that animate
Claude adds `will-change: transform` in CSS to elements that move, and avoids setting it, or `force3D`, on everything.
Read · will-change
Do all DOM reads first, then all writes
Claude avoids mixing layout reads and writes in a way that forces the browser to recalculate layout repeatedly.
Read · Batch reads and writes
Use stagger, reuse timelines, animate only visible items
For many elements Claude uses one staggered tween rather than hundreds of separate delayed ones, and suggests virtualization for long lists.
Read · Stagger and long lists
Reuse one tween for values that update often
For mouse followers and similar, Claude uses quickTo so a single tween is reused instead of creating a new tween on each event.
Try: “My cursor follower lags. Use the GSAP performance rules to fix it.”
Read · gsap.quickTo()
Pin only what you need, small scrub values, debounce refresh
Claude pins as little as possible, tries a small scrub value such as 1, and calls ScrollTrigger.refresh() only when layout changes.
Read · ScrollTrigger performance
Kill or pause off-screen animations and clean up
Claude stops animations and ScrollTriggers that are not visible or no longer needed.
Read · Reduce simultaneous work

From the official docs

Questions

What does the GSAP Performance skill do?

It makes Claude follow GSAP's own performance rules when it writes or reviews animation code. The main rules are to animate transforms and opacity, use stagger and quickTo, and clean up animations that are off screen.

How do I install it?

Use the install box at the top of this page. The README also documents a Claude Code plugin marketplace route (/plugin marketplace add greensock/gsap-skills) and a Cursor remote rule that point at the whole repo, which holds 8 GSAP skills. Restart your agent session afterwards so it finds the new skill.

Do I need the other GSAP skills?

No. Its SKILL.md lists gsap-core and gsap-timeline (for building animations) and gsap-scrolltrigger (for scroll performance) as related skills, but it does not say it requires them. The repo has 8 skills in all (gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-react, gsap-performance, gsap-frameworks), and the README installs them together with one skills CLI command.

Does it work in Cursor, Codex or Copilot?

Cursor and Codex: yes, the README lists both, using the skills CLI or by copying the skills folder. GitHub Copilot is different: the README says Copilot does not load Cursor or Claude skill files, so you copy its Copilot instructions file into your repo instead. The README does not mention the Claude app.

Does it need an API key or an account?

No key or account is mentioned in the SKILL.md. GSAP itself is free, including every plugin, according to the README, and installs from the public gsap npm package.

Is it safe to install?

It is low risk. It is a single text file that tells Claude how to write GSAP code, and it bundles no scripts. The repo README rates its own risk level LOW. You still read the code Claude writes before you ship it.

Information

updated Nov 2, 2026

Repository: greensock/gsap-skills
Folder: skills/gsap-performance

greensock/gsap-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

gsap-performance SKILL.md · github.com
greensock/gsap-skills README · github.com