1. Habit
  2. Skills
  3. GSAP Performance skill
greensock · 67K installs

GSAP Performance skill
Runs by itself, PR changes animation code.

Keep GSAP animations smooth.

Install the GSAP Performance skill and make it a habit: follow https://gethabit.dev/skills/greensock/gsap-performance.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

67K installs17K starsMIT licenceSource on GitHub ↗

GSAP Performance

by greensock · 67K installs

The skill

The gsap performance skill is the official GreenSock guide for smooth GSAP animations: transforms over layout properties, careful will-change, batched reads and writes, stagger, quickTo and cleanup.

Only when you ask.

The habit

Keep GSAP animations smooth.

↻ Runs by itselfPR changes animation code

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

PR changes animation code. Runs in GitHub Actions or Claude Code routine.

  • ↻ PR changes animation code
  • pull_request touching files that import gsap

02

It checks its work

layout check + review score. If a check fails, it tells you.

  • ✓build passes
  • ✓diff adds no tween that moves an element with width, height, top or left
  • ✓no new tweens or timelines are created inside a per-frame or mousemove handler where gsap.quickTo() fits
  • ✓ScrollTrigger.refresh() is not called on every resize without a debounce

03

It remembers

animation findings list. The next run reads it first: patterns already fixed and files still open.

loops/gsap-performance-loop/findings.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request per run and one retry of the review.

  1. 01

    Read the diff

    Collect the GSAP tweens, timelines and ScrollTriggers the pull request adds or changes.

  2. 02

    Check properties

    Flag movement done with width, height, top or left and suggest x, y, scale or opacity instead.

  3. 03

    Check will-change

    Make sure will-change is set only on elements that really animate.

  4. 04

    Check many elements

    Suggest stagger over hand-delayed tweens, quickTo for frequent updates and reuse of timelines.

  5. 05

    Check cleanup

    Look for off-screen animations that keep running and for pins or refresh calls beyond what is needed.

  6. 06

    Report

    Post the findings, run the hard checks and add new patterns to the findings list.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the GSAP Performance skill helps.

Use it when

  • ✓ GSAP animations stutter or drop frames
  • ✓ You animate many elements at once
  • ✓ You build mouse followers or scroll effects

Skip it when

  • – You do not use GSAP
  • – The animation already runs smoothly on low-end devices

Questions

GSAP Performance skill, answered.

Does it measure frames per second?

No. It reviews code against the skill's rules. Test on low-end devices yourself.

Does it change my code?

No. It reports findings on the pull request and keeps its own notes.

How do I install the GSAP Performance skill?

Copy the prompt at the top into your agent. It installs the skill from greensock/gsap-skills and sets up the habit. Or run npx skills add greensock/gsap-skills --skill gsap-performance.

Is the GSAP Performance skill free?

Yes. It is published under MIT. Habit is free too.

GSAP Performance. Now as a habit.

Install the GSAP Performance skill and make it a habit: follow https://gethabit.dev/skills/greensock/gsap-performance.md

  • Free
  • No account
  • Undo in one line

All greensock skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by greensock, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.