gsap-performance

Animate only transform properties (x, y, scale, rotation) and opacity, which stay on the compositor and avoid layout and paint. Add will-change: transform in CSS only on elements that actually animate, and avoid width, height, top, or left.

gsap.quickTo() creates a single reusable tween for properties updated frequently, such as mouse-follower x/y positions. It avoids creating a new tween on every mousemove event, reducing overhead for continuously updated animations.

Use stagger when many elements share the same animation; it is more efficient than creating many separate tweens with manual delays. For long lists, also consider virtualization or animating only visible items.

Jank often comes from pinning too many elements, calling ScrollTrigger.refresh() on every resize, or running too many simultaneous ScrollTriggers. Pin only what is needed, use a small scrub value, and debounce refresh calls to actual layout changes.

Avoid setting will-change or force3D on every element just in case, since excessive layer promotion wastes memory and can hurt performance. Apply it only to elements that are actually animating.