Motion With a Purpose
When animation helps people understand an interface, and when it gets in the way.
Motion is easy to add and hard to justify. A transition can orient someone—or it can make them wait for theater. The difference is purpose.
What motion should do
Useful motion answers a question: Where did this come from? What changed? Where can I go next? If an animation cannot answer one of those, it is probably ornament.
- Guide attention to the change that matters.
- Preserve spatial relationships during layout shifts.
- Give continuous actions a sense of momentum without delay.
When to stay still
Stillness is also a design decision. Dense tools, accessibility preferences, and time-critical workflows benefit from restraint. Respect prefers-reduced-motion as a first-class path, not an afterthought.
If removing the animation improves clarity, the animation was never helping.
A short rule of thumb
Animate state changes that would otherwise feel discontinuous. Keep hover and micro-interactions soft. Never make people wait for delight.
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}Purpose first, polish second. That order keeps motion honest—and keeps the interface feeling alive without becoming noisy.