gsap-performance

To optimize GSAP animations for 60fps, you should animate transform and opacity properties, apply CSS will-change to animated elements, and batch animation updates to reduce layout thrashing and minimize visual jank.

GSAP animation causes layout thrashing and jank when animating layout-heavy CSS properties instead of transforms; you can prevent this by using GSAP's internal update batching and focusing strictly on transform and opacity tweens.

The best way to handle staggered animations in large lists is utilizing GSAP's stagger features combined with virtualization techniques, which efficiently manage multiple animations to maintain smooth performance without dropping frames.

To optimize mouse follower animations, use quick tweens for frequently updated properties to prevent the unnecessary creation of new tween instances, thereby stopping performance bottlenecks during rapid mouse movement updates.

You should use CSS will-change promotion for web animation optimization when preparing elements for transform or opacity animations, as it hints the browser to optimize rendering layers in advance and reduces paint costs during the animation.