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.
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/gsap-performance
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
📊 Stats
Stars80,924
Forks9,349
LanguageTypeScript
LicenseApache-2.0
📦 Ships with open-design
</> SKILL.md
gsap-performance.SKILL.md
---name: gsap-performance
description: |
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.
triggers:
- "gsap performance"
- "animation jank"
- "60fps animation"
- "will-change"
- "layout thrashing"
license: MIT
od:
mode: prototype
category: animation-motion
upstream: "https://github.com/greensock/gsap-skills"
---# GSAP Performance
> Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap-skills
## When to Use This Skill
Apply when optimizing GSAP animations for smooth 60fps, reducing layout/paint cost, or when the user asks about performance, jank, or best practices for fast animations.
**Related skills:** Build animations with **gsap-core** (transforms, autoAlpha) and **gsap-timeline**; for ScrollTrigger performance see **gsap-scrolltrigger**.
## Prefer Transform and Opacity
Animating **transform** (`x`, `y`, `scaleX`, `scaleY`, `rotation`, `rotationX`, `rotationY`, `skewX`, `skewY`) and **opacity** keeps work on the compositor and avoids layout and most paint. Avoid animating layout-heavy properties when a transform can achieve the same effect.
- ❌ Avoid when possible: **width**, **height**, **top**, **left**, **margin**, **padding** (they trigger layout and can cause jank).
GSAP’s **x** and **y** use transforms (translate) by default; use them instead of **left**/**top** for movement.
## will-change
Use **will-change** in CSS on elements that will animate. It hints the browser to promote the layer.
```css
will-change: transform;
```
## Batch Reads and Writes
GSAP batches updates internally. When mixing GSAP with direct DOM reads/writes or layout-dependent code, avoid interleaving reads and writes in a way that causes repeated layout thrashing. Prefer doing all reads first, then all writes (or let GSAP handle the writes in one go).
## Many Elements (Stagger, Lists)
- Use **stagger** instead of many separate tweens with manual delays when the animation is the same; it’s more efficient.
- For long lists, consider **virtualization** or animating only visible items; avoid creating hundreds of simultaneous tweens if it causes jank.
- Reuse timelines where possible; avoid creating new timelines every frame.
Prefer **gsap.quickTo()** for properties that are updated often (e.g. mouse-follower x/y). It reuses a single tween instead of creating new tweens on each update.
