✳flâneur — a map of the web's best reading

The Web Animation Performance Tier List - Motion Blog

motion.dev · 4,854 words · saved by 2 readers

Animation performance is one of the topics I'm asked about the most. It makes sense - the whole reason we make animated UIs is so they feel smooth and responsive. If these animations don't perform well, they become actively harmful to the overall experience. But performance can often feel like a dark art. It's a broad topic, extremely nuanced, and full of trade-offs. In this article, I'm sharing everything I know about animation performance on the web. We'll cover it all - when to use will-change (and when to not), why CSS variables are bad actually, what hardware acceleration means - everything. Yes, we're going to go into the technical details, and talk about these nuances and trade-offs. At the same time, we're going to categorise everything into an animation performance tier list, so you can easily remember which techniques to prefer, which to use with care, and which to avoid completely. Before we can get to ranking, we need to understand a little about the browser's render pipeli

Animation performance is one of the topics I'm asked about the most. It makes sense - the whole reason we make animated UIs is so they feel smooth and responsive. If these animations don't perform well, they become actively harmful to the overall experience. But performance can often feel like a dark art. It's a broad topic, extremely nuanced, and full of trade-offs. In this article, I'm sharing everything I know about animation performance on the web. We'll cover it all - when to use will-change (and when to not), why CSS variables are bad actually, what hardware acceleration means - everythi

Explore this link on the map →

saved by

related reading