gsap-performance

To fix GSAP animation jank and maintain 60fps, prioritize compositing-friendly properties like transforms and opacity. Batching DOM reads and writes while reusing timelines minimizes layout thrashing and reduces expensive repaints during complex web animations.

Optimize ScrollTrigger animations by enforcing transform-focused properties such as x, y, scale, and rotation. Applying will-change to animated elements shifts rendering work to the compositor, significantly improving scroll-triggered frame rates and reducing visual stuttering.

GSAP layout thrashing causes UI stuttering when the browser rapidly alternates between reading layout properties and writing styles. This forces synchronous recalculation of the render tree, dropping the frame rate below 60fps and making complex timelines visibly janky.

Best practices for GSAP transforms include using x, y, scale, and rotation instead of layout-inducing properties like top or left. Apply will-change only to elements that animate to hint the browser to prepare layers, and reuse timelines to maximize compositor efficiency.

Yes, this optimization approach works for complex timelines by enforcing batched DOM reads and writes. Reusing timelines instead of creating new instances minimizes memory allocation and repaints, keeping dynamic motion and extensive animation sequences smooth at 60fps.

You should not overuse will-change for web animations. Applying it to too many elements increases memory consumption and can degrade performance, so it should only be applied selectively to elements that actively animate using transform and opacity properties.