gsap-performance

SKILL.md

Optimize GSAP animations for smooth 60fps by favoring transforms, batching DOM operations, and avoiding layout thrashing.

Animate transform (x, y, scale, rotation) and opacity instead of layout properties (width, height, top, left) to keep work on the compositor and prevent jank

Use will-change CSS sparingly on elements that actually animate, and apply gsap.quickTo() for frequently updated properties like mouse followers

Batch DOM reads and writes to avoid layout thrashing; use stagger for multiple similar animations instead of separate tweens with manual delays

Manage ScrollTrigger performance by pinning only necessary elements, debouncing refresh() calls, and pausing off-screen animations to reduce simultaneous work

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