gsap-performance

To reduce GSAP animation jank and achieve 60fps, you should promote transform and opacity animations, minimize layout thrashing by batching DOM reads and writes, and apply CSS will-change hints for browser optimization.

Layout thrashing in GSAP animations is caused by interleaving DOM reads and writes, which forces the browser to recalculate styles repeatedly. You fix it by batching reads and writes together to minimize performance bottlenecks.

To optimize ScrollTrigger performance, follow GSAP best practices by animating transform and opacity properties, staggering multiple element animations for efficiency, and minimizing layout recalculations during scroll events.

Use the CSS will-change property for GSAP animation optimization when you need to hint the browser about upcoming transform or opacity changes, allowing it to prepare rendering optimizations in advance and reduce jank.

Yes, you can use GSAP stagger to improve animation performance with multiple elements. Staggering animations distributes the rendering workload efficiently, helping maintain smooth frame rates and reducing overall jank.