Motion that explains
Writing team:
Ruth Alvarez Principal designerIf an animation is not telling the user where something came from, it is costing you 300ms for nothing.
Motion is a sentence, not a flourish
The animations worth keeping are the ones answering a question the user already had: where did that go, what just changed, is this the same thing I was looking at.
Three jobs motion can do
- Continuity: the thing that moved is the same thing, not a new one.
- Causality: this happened because of what you just did.
- Status: something is in progress, and here is roughly how much.
An animation doing none of these is spending time the user did not agree to spend.
Duration is a readability setting
Under 150ms reads as instant and explains nothing. Over 500ms starts to feel like waiting. Most explanatory motion lives between those, and the same easing should be reused everywhere so the product moves in one voice.
Respect the setting
Reduced-motion is not an edge case, and the correct response is rarely to remove the animation. Replace the movement with a cut, keep the meaning.
Ship the next release with a team that has done this before
We join in-flight products and leave them faster to change than we found them. Research, design and front-end, on one clock.
View services
