gsap-performance

GSAP Performance

When to Use This Skill

Apply when the affected animation uses GSAP or ScrollTrigger. Diagnose measured frame, layout/paint or lifecycle cost. Generic motion diagnosis belongs to animation-jank-qa, and a broad release review to motion-performance-qa.

Related skills: motion-performance-qa, animation-jank-qa, animation-tool-router, and reduced-motion-design.

Prefer Transform and Opacity

Animating transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) and opacity usually avoids layout and can reduce paint cost; compositor isolation depends on the browser, layer composition and effect. Measure instead of assuming GPU acceleration. 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 because they trigger layout and can cause jank.

GSAP's x and y use transforms by default; use them instead of left/top for movement.

will-change

Use will-change selectively on elements that will animate soon. It hints the browser to prepare for animation work, but overusing it can increase memory pressure.

will-change: transform;

Remove or narrow will-change when an element no longer needs it.

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: Staggers and Lists

• Use stagger instead of many separate tweens with manual delays when the animation is the same.
• 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.