There are a bunch of JavaScript animation libraries out there, and you might have wondered whether there’s a performance cost compared to traditional CSS transitions and keyframe animations. In this blog post, we’ll compare the same animation across several different strategies and see the differences firsthand. There’s some interesting nuance here!

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

CSS keyframe animations and transitions run on a separate thread from JavaScript, making them immune to main thread blocking — unlike raw requestAnimationFrame loops or most JS animation libraries. Motion (formerly Framer Motion) is an exception because it uses the Web Animations API (WAAPI) under the hood, giving it the same off-main-thread benefits as CSS. GSAP runs on the main thread but offers more powerful features as a trade-off. The recommendation is to prefer native CSS animations, fall back to Motion when CSS falls short, and note that modern CSS APIs like View Transitions, linear(), and Animation Timeline reduce the need for JS libraries.

CSS vs. JavaScript • Josh W. Comeau

Link to this heading Comparing CSS keyframes to JavaScript loops

Link to this heading Comparing animation libraries

Link to this heading The right tool for the job

I’m really glad my interest in CSS led me to choose CSS animations instead of JavaScript approaches by default. But I like and admire some JavaScript animation libraries such as Motion and GSAP. It was a good subject👌

Your content is amazing (especially the interactive examples!), but how can you charge $600+ for an online course? Who can afford that? I will never understand.

I use to belief CSS animations being more performant than in JS, only relying on the instinct that built-in must be more efficient. I am so glad to understand why now, and to know that JS animations can still be more interesting depending on the final behaviour we expect.