gsap-performance

Animate 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 animating width, height, top, or left.

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

Layout thrashing happens when you interleave DOM reads and writes or animate layout properties like width, height, top, left, margin, or padding. Batch all reads first, then writes, and use x and y transforms instead of positional properties.

Yes. pin: true promotes the pinned element, so pin only what is needed, and a small scrub value can reduce scroll work. Call ScrollTrigger.refresh() only when layout actually changes, debounced, rather than on every resize.

No. Applying will-change or force3D to every element wastes memory and can hurt performance. Use these hints only on elements that are actually animating, and remove or clean up animations when they go off-screen.