gsap-performance

GSAP animation jank is reduced by converting layout-heavy motion into transform and opacity based updates, tuning ScrollTrigger scrub behavior, and batching DOM reads and writes to eliminate layout thrashing during scroll-driven playback.

GSAP tweens cause layout thrashing when DOM reads and writes are not batched, forcing the browser to recalculate styles repeatedly. You must batch DOM work and prefer transform-first animation properties like x, y, and scale to avoid heavy paint work.

The best way to optimize high-frequency GSAP interactions like mouse followers is using quickTo updates, stagger, and timeline reuse. These patterns rapidly update transforms without allocating new tween instances, maintaining smooth playback on high-refresh devices.

You can use will-change to improve GSAP transform and opacity animations, but it must be applied sparingly. Overusing will-change hints consumes excessive memory, so apply them only to elements actively undergoing motion to reduce paint cost without degrading overall page performance.

GSAP ScrollTrigger needs specific tuning for smooth pinning and scrub behavior, including adjusting refresh timing and scrub sensitivity. Properly tuned ScrollTrigger effects prevent scroll jank and keep motion fluid during scroll-driven animations on both low-end and high-refresh devices.

You should not use GSAP layout properties like width, height, or top for motion-heavy interfaces because they trigger heavy paint and layout work. Instead, use transform-based motion with x, y, scale, and rotation to keep playback smooth and reduce animation cost.