gsap-performancelisted

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.
Oatelauser/ai-front-spec · ★ 0 · Web & Frontend · score 67

Install: claude install-skill Oatelauser/ai-front-spec

# GSAP Performance ## 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. - ✅ Prefer: **x**, **y**, **scale**, **rotation**, **opacity**. - ❌ 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 do