CSS vs. JavaScript: exploring the performance implications of different animation strategies

Two boxes labeled “Using CSS Keyframes” and “Using a JavaScript loop” with sliders, an upside-down character between them, a Play button, and “Are JavaScript animations less performant than CSS?”

Josh Comeau compares CSS, Web Animations API, and the JS libraries GSAP and Motion under main-thread congestion. CSS and Motion stay smooth because their animations run off the main thread, while typical JS animations and GSAP freeze. Library cost matters too: Motion weighs 48 kB gzipped, GSAP 27 kB. Use native CSS when you can, and reach for JS libraries only for what CSS can’t do, like SVG shape morphing.

joshwcomeau.com/animation/css-vs-javascript