Kipt

GSAP performance skill: official rules for smooth GSAP animation

The GSAP performance skill teaches agents to animate transforms, use quickTo, batch DOM work and clean up ScrollTriggers to avoid jank. What it covers and how to install.

By the Kipt team · Updated 24 October 2026

Source: greensock/gsap-skills · Maintainer: GreenSock · License: MIT · Checked: 24 October 2026

What is the GSAP performance skill?

The GSAP performance skill, gsap-performance, is GreenSock's official Agent Skill for smooth GSAP animation: it teaches your coding agent to animate cheap properties, reuse tweens, limit simultaneous work and clean up, so animations hold a steady frame rate instead of stuttering. It is for frontend developers whose GSAP or ScrollTrigger work feels janky, or who want the agent to avoid those patterns from the start.

It is one of eight skills in greensock/gsap-skills, next to gsap-core. The SKILL.md description says: "Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps."

As of 24 October 2026, its skills.sh page listed about 68,200 installs (snapshot, 24 October 2026), third of the eight GSAP skills. The repo had about 17,000 GitHub stars on the same date.

What does it do?

The folder holds one short SKILL.md of about 590 words, the shortest in the repo. There are no scripts. The agent loads it when you ask about speed, jank or frame rate in GSAP code.

What it teaches:

  • Transform and opacity first. Animate x, y, scale, rotation and opacity, which the skill says keep work on the compositor, and avoid width, height, top, left, margin and padding, which trigger layout.
  • will-change, surgically. Add will-change: transform in CSS on elements that actually animate, never on everything "just in case".
  • Batch reads and writes. When GSAP code mixes with your own DOM measurement, do all reads first, then all writes, to avoid layout thrashing.
  • Many elements. Use stagger instead of many tweens with manual delays, consider virtualization for long lists, and don't create new timelines every frame.
  • Frequent updates. Use gsap.quickTo() for mouse followers and similar inputs, with a short code example.
  • ScrollTrigger. Pin only what's needed, try a small numeric scrub, and call ScrollTrigger.refresh() only when layout actually changes.
  • Less simultaneous work. Pause or kill off-screen animations and avoid animating many properties on many elements at once.

GSAP's quickTo() docs back the mouse-follower advice: it reuses one tween and skips the extra processing a normal gsap.to() call does, which they say can "boost performance" when you would otherwise call gsap.to() repeatedly on the same property.

Here are the skill's main swaps in one table:

Slow pattern What the skill suggests
Moving with top and left Move with x and y (transforms)
Resizing with width and height Use scale when it gives the same look
gsap.to() on every mousemove One gsap.quickTo() function per property
Many tweens with manual delays One tween with stagger
will-change on every element Only on elements that animate
Animations running off screen Pause or kill them

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-performance

The performance rules assume the core API, so many people install the whole repo:

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

Claude Code plugin. The README says to run /plugin marketplace add greensock/gsap-skills. The repo's marketplace.json names its one plugin gsap-skills, so the install, in the form the Claude Code plugin docs give, is:

/plugin marketplace add greensock/gsap-skills
/plugin install gsap-skills@gsap-skills

Copy the folder. Put gsap-performance/ in .claude/skills/ for one project or ~/.claude/skills/ for all projects, per the Claude Code skills docs. Codex and Cursor read the same format; see Codex skills and Cursor skills. On claude.ai, zip the folder and upload it as the Claude help article on skills describes.

How do you use it?

Point the agent at the slow animation and say what feels wrong. Example prompts (suggestions, not quotes from the repo):

  • The sidebar slide-in stutters on my phone. Check the GSAP code for layout-triggering properties and switch to transforms.
  • Rewrite the custom cursor follower to use gsap.quickTo instead of a new tween on every mousemove.
  • We create 300 tweens for the product grid entrance. Replace them with one staggered animation.
  • Audit this page's ScrollTriggers: what is pinned, what scrubs, and what can be simplified for low-end devices?
  • Find GSAP animations that keep running after their section leaves the screen and pause them.

Requirements: the gsap npm package. GSAP's pricing page says "GSAP is now 100% free for all users, thanks to Webflow’s support."

Tips and limits

  • Rules, not measurement. The skill has no profiling steps. Pair it with a measuring skill such as Cloudflare's web performance skill or the Core Web Vitals skill when you need numbers.
  • The compositor claim has a catch. The skill says transforms and opacity keep work on the compositor. Ui-skills' fixing-motion-performance adds that layer promotion should never be assumed and should be checked with browser tooling when it matters.
  • Short coverage. At about 590 words, it gives principles and one code sample. ScrollTrigger details, such as refreshPriority and batch(), are in the ScrollTrigger skill.
  • Test on real devices. The Do Not list warns against creating hundreds of tweens or ScrollTriggers "without testing on low-end devices". The skill can't do that testing for you.
  • Security audit. As of 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub, Socket and Snyk.

The SKILL.md frontmatter declares license: MIT, matching the repo's MIT LICENSE (copyright 2026 GreenSock). You can copy and change it if 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, or paste the repo link and pick from the list of all eight GSAP skills. You can also drop the folder or a .zip. Your skills stay 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

Questions

What is the GSAP performance skill?

gsap-performance is GreenSock's official Agent Skill for fast GSAP animation, published in the greensock/gsap-skills repo. It tells a coding agent to animate transforms and opacity instead of layout properties, use will-change sparingly, prefer stagger and gsap.quickTo(), and clean up tweens and ScrollTriggers. It is MIT licensed.

How do I install the GSAP performance skill?

Run npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance, the command on its skills.sh page. Leave off --skill to install all eight GSAP skills. In Claude Code you can also add the repo as a plugin marketplace with /plugin marketplace add greensock/gsap-skills.

Why is my GSAP animation janky?

The common causes the skill targets are animating width, height, top or left instead of x, y and scale, creating a new tween on every mousemove, and too many simultaneous tweens or ScrollTriggers. It also flags interleaved DOM reads and writes and animations left running after they leave the screen.

What is gsap.quickTo() for?

gsap.quickTo() returns a reusable function that animates one numeric property of one target toward each new value you pass. GSAP's docs recommend it when you would otherwise call gsap.to() over and over on the same property, such as in a mousemove handler. The skill uses it for mouse followers.

Does the skill measure performance?

No. It is a list of rules and code patterns with no scripts or profiling steps. It tells you to test on low-end devices, but measuring frame rate or Core Web Vitals is up to you or a separate skill such as a web performance audit skill.

More in Skill directory

All guides

Keep your prompts and skills in one place, in your own GitHub. Install every skill with one command.

Get started

Kipt is an independent product, not affiliated with or endorsed by Anthropic, OpenAI, Cursor or GitHub. Claude, ChatGPT, Codex, Cursor and GitHub are trademarks of their owners.