gsap-performance

Animate transform and opacity properties (x, y, scale, rotation) instead of layout-heavy ones like width, height, top, or left. Add will-change: transform in CSS only on elements that actually animate, and avoid creating hundreds of simultaneous tweens.

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, which reduces overhead and keeps the animation smooth.

Width, height, top, left, margin, and padding trigger layout recalculation and paint on every frame, which is expensive. Transforms and opacity stay on the compositor thread, so use x, y, and scale to achieve the same visual effect.

No. Apply will-change only to elements that are actually animating, since each promoted layer consumes memory. Setting it everywhere 'just in case' can hurt performance rather than help it.

Pin only the elements that need it, use a small scrub value like scrub: 1 to reduce scroll-time work, and call ScrollTrigger.refresh() only when layout actually changes, debounced rather than on every resize.