Motion is the easiest thing in an interface to add and the hardest to justify. It demos brilliantly, it is fun to build, and it is almost never measured. Which is how sites end up with a fade-up on every element and a page that feels slower than the one it replaced.
The test
Every animation on a page has to answer at least one of these. If it answers none, it comes out.
- Does it guide attention to something that matters?
- Does it clarify hierarchy or relationship?
- Does it make navigation legible — where did that come from, where did it go?
- Does it make an interaction feel more responsive than it is?
- Does it reinforce the brand in a way nothing else on the page does?
What usually fails
Scroll-triggered fades on body paragraphs. Every card in a grid animating independently. Anything that delays content the reader has already asked for. These feel considered while you are building them and feel like latency when you are reading.
What usually passes
A headline revealing line by line, because it establishes reading order. A page transition, because it explains that you moved. A hover state that moves 3px, because it confirms the thing is interactive. Restraint reads as confidence; volume reads as decoration.
Precise, smooth and restrained. Not flashy, not overanimated, not template-like.
Budget it
We hold animation libraries to a gzipped budget and hold the page to Core Web Vitals thresholds. A motion system that costs you the LCP threshold is not sophisticated, it is expensive.