Motion that earns it

There are exactly two defensible reasons to animate something in an interface. The first is to explain a spatial relationship: this panel came from that button, this row moved there, these items reordered. The second is to acknowledge an action: we heard you, something is happening, it worked.

Everything else is decoration, and decoration is not free. It costs milliseconds of attention, and on lower-end devices it costs frames. The question is never whether an animation is nice. It is what the animation is telling somebody.

The two reasons, in practice

Explaining a spatial relationship

A menu that grows out of the button that opened it tells you where you are and how to get back. The same menu fading in from nowhere tells you nothing, and quietly costs you the sense that the interface has a structure at all. Sorting a table with a transition shows rows moving to new positions; sorting it with a hard cut leaves people re-reading the whole list to work out what changed.

The test is whether removing the movement would leave somebody briefly lost. If it would, the movement is carrying information and is worth its cost.

Acknowledging an action

This is smaller and far more common. A button that responds on press. A field that confirms it accepted the input. A save indicator that appears before the request has finished. Acknowledgement is about latency more than delight: it closes the gap between doing something and seeing evidence that you did it.

It is also the category most often over-built. Acknowledgement wants to be almost subliminal. By the time you notice it as an animation, it is too long.

The one-sentence test

Describe what the animation tells the user, in one sentence, without using the words polish, premium, delight or feel. If you cannot, cut it — or shorten it until it disappears.

This is a blunt instrument on purpose. It is very easy to justify motion in the abstract and very hard to justify a specific instance of it in plain language. Most decoration does not survive the second attempt at the sentence.

Duration follows purpose

Once you know which of the two jobs an animation is doing, its length stops being a matter of taste. Acknowledgement wants to be fast — roughly 120 to 200ms, barely perceived. Explanation wants to be slow enough to follow, usually 300 to 500ms, with a curve that decelerates so the eye can land on the end state.

Easing carries as much meaning as duration. A movement that starts quickly and slows reads as something arriving and settling. One that starts slowly and accelerates reads as something leaving. Getting those the wrong way round makes an interface feel subtly wrong in a way people rarely manage to name.

Where longer durations are defensible

Mainly one place: a transition that covers a change the user would otherwise have to reconcile by themselves, such as moving between pages. There the animation is doing real work — it hides a reflow, a scroll reset and a repaint, and it keeps the reader oriented while the ground moves underneath them. That is worth a second of somebody's time. A hover state is not.

The animation almost everyone under-invests in

It is the one between pages. It is the only moment where a user genuinely loses their place, and on most sites it is a hard cut: the current page vanishes, the new one appears, the scroll position jumps to the top, and the reader reassembles the context themselves.

Treating that moment as a designed transition rather than an absence is one of the cheapest improvements available to most sites. It is also most of what motion is for: the moving parts of a brand, made to do a job rather than to be admired.

Motion and the people who asked for less of it

`prefers-reduced-motion` is not an edge case, and it is not only about vestibular disorders — plenty of people simply turn it on. Respecting it does not mean removing feedback. It means removing travel: keep the state change, drop the distance, shorten or remove the transition.

A useful discipline is to build the reduced-motion version first. If the interface is comprehensible with nothing moving, every animation added afterwards is genuinely additive rather than load-bearing — and you will not discover late that a piece of information was only ever conveyed by a movement.

Common mistakes

Animating on every state change, so nothing stands out and the interface acquires a permanent low-level shimmer. Using one duration everywhere, which makes acknowledgement feel sluggish and explanation feel abrupt. Animating layout properties — width, height, top — where a transform would do, which is the difference between a composited animation and a dropped frame.

And staging entrances that fire while the element is still hidden behind something else, so the reader arrives at a page that has already finished animating. That one is easy to miss because it looks correct in isolation and only shows up when the animation is put back into the real page.