gsap-performance

Animate transform properties (x, y, scale, rotation) and opacity, which stay on the compositor and avoid layout and paint. Avoid animating width, height, top, left, margin, or padding, since these trigger layout and cause jank.

Use gsap.quickTo() for frequently updated properties like mouse-follower x and y positions. It reuses a single tween instead of creating a new tween on every mousemove event, reducing overhead significantly.

No, apply will-change: transform only to elements that will actually animate. Setting it on every element wastes memory and compositor resources without benefit, so use it selectively as a layer promotion hint.

Lag often comes from excessive pinning, calling ScrollTrigger.refresh() on every resize, or too many simultaneous triggers. Pin only what is needed, use a small scrub value, and debounce refresh calls to fire only when layout actually changes.

Use stagger whenever many elements share the same animation, since it is more efficient than creating separate tweens with manual delays. For long lists, also consider virtualization or animating only visible items to avoid hundreds of simultaneous tweens.