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 to elements that actually animate, and avoid animating 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 changing values.

Layout thrashing happens when you animate layout-triggering properties like width, height, top, left, margin, or padding, or when you interleave DOM reads and writes. Use x/y transforms instead and batch all reads before writes.

No. Apply will-change only to elements that are actually animating, since it promotes elements to their own compositor layer and consumes memory. Setting it on every element just in case wastes resources and can hurt performance.

Pin only the elements that need it, use a small scrub value like scrub: 1 to reduce scroll work, and call ScrollTrigger.refresh() only when layout actually changes, debounced where possible. Kill or pause off-screen ScrollTriggers when not visible.