gsap-performance

Animate only transform and opacity properties, which stay on the compositor and avoid layout and paint. Use x and y instead of left and top, add will-change: transform to animating elements, and avoid creating hundreds of simultaneous tweens.

Use gsap.quickTo() for mouse follower x and y properties instead of creating a new tween on every mousemove event. quickTo reuses a single tween instance, which is far more efficient for frequently updated values.

Avoid animating width, height, top, left, margin, and padding because they trigger layout recalculation and cause jank. Use transform-based properties like x, y, scale, and rotation to achieve the same visual effect on the compositor.

Call ScrollTrigger.refresh() only when the page layout actually changes, such as after content loads, not on every resize event. Debounce the calls when possible to avoid unnecessary recalculation work during scrolling.

Jank usually comes from animating layout properties, running too many simultaneous tweens, or leaving off-screen animations active. Simplify or sequence animations, kill off-screen tweens, and test scrub values on low-end hardware.