gsap-performance
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.