gsap-performance

1# GSAP Performance
2 
3## When to Use This Skill
4 
5Apply 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.
6 
7**Related skills:** Build animations with **gsap-core** (transforms, autoAlpha) and **gsap-timeline**; for ScrollTrigger performance see **gsap-scrolltrigger**.
8 
9## Prefer Transform and Opacity
10 
11Animating **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.
12 
13- ✅ Prefer: **x**, **y**, **scale**, **rotation**, **opacity**.
14- ❌ Avoid when possible: **width**, **height**, **top**, **left**, **margin**, **padding** (they trigger layout and can cause jank).
15 
16GSAP’s **x** and **y** use transforms (translate) by default; use them instead of **left**/**top** for movement.
17 
18## will-change
19 
20Use **will-change** in CSS on elements that will animate. It hints the browser to promote the layer.
21 
22```css
23will-change: transform;
24```
25 
26## Batch Reads and Writes
27 
28GSAP 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).
29 
30## Many Elements (Stagger, Lists)
31…