Motion

Arrival is the least contested motion in interface design and the one most often spent badly. Its job is a single assertion: this was not here before. A fade with a short rise carries that in about a quarter of a second, and anything longer starts to read as ceremony.

The rise matters more than the fade. Movement from below suggests the element is entering the layout rather than materialising on top of it, which is why the same fade with no translation feels like a spinner finishing and the fade-with-rise feels like something arriving. Fourteen pixels is plenty; thirty is a swoop.

The failure is volume, not craft. An arrival animation applied to every element of a page turns a load into a performance, and the reader pays its duration whether or not they were looking.

Dismissal is arrival run backwards, and it should be faster. The asymmetry is the whole rule: entering, an element is asking for attention it has not yet earned; leaving, the reader has already given the instruction and is waiting for the interface to catch up.

The scale-down matters. Fading alone reads as something becoming transparent — still present, just less so. A fade with a slight contraction reads as departure, because things that leave get smaller. Going the other way, scaling up while fading out, is the standard vocabulary for something being consumed or absorbed rather than dismissed, which is why it is right for a photo closing back into its thumbnail and wrong for a toast.

The trap is chaining. When a dismissal must complete before the next screen can start, its duration stops being an acknowledgement and becomes a delay, and the reader learns to wait rather than to read.

Origin is the most expensive motion here and the only one that carries an argument rather than a signal. Arrival says new; dismissal says gone; origin says these two things are one thing, which is a claim about the structure of the interface and can therefore be false.

That is what makes it worth having and what makes it dangerous. A card that expands into its own detail view teaches the reader the hierarchy in a way no breadcrumb does. The same animation applied between two unrelated screens teaches them that the animation is decorative — and once learned, that lesson applies to every transition afterwards, including the honest ones.

The platform has caught up: the View Transitions API is the browser offering to do this natively rather than each application reimplementing it. Which means the interesting question is no longer whether it can be done, but whether the relationship being drawn is real.

Progress is the only motion in this gallery that a reader is meant to watch, and the only one that can be dishonest in a way they can catch. A determinate bar makes a claim about how much work remains. If that claim is invented — a fixed animation that fills over three seconds regardless of the work — the reader will eventually see it sit at a hundred per cent while nothing happens, and every progress bar in the product loses its credibility at once.

The threshold for showing anything at all comes from the response-time literature this building already keeps upstairs: under about a tenth of a second an interface feels instantaneous and needs no indicator; up to about a second, thought is uninterrupted; past that, the reader needs to be told the system is still there. A spinner that appears for two hundred milliseconds is answering a question nobody asked.

Under reduced motion this entry has the hardest problem in the gallery. A spinner cannot simply be stopped — a frozen spinner is the universal signal of a hung application. The substitute has to be a state that changes without moving.

The shake is the only motion in this gallery that is borrowed directly from the body. It is a head shaking, and it is legible for that reason rather than any interface one — which is also why it survives translation better than most conventions.

Its value is locative rather than semantic. The error message says what is wrong; the shake says this field. On a long form that distinction is worth several seconds of scanning, and on a passcode screen it is the entire interaction: the field refuses, clears, and waits, and no text is needed because there is only one thing it could mean.

Its failure is always the same one. Because the motion is so legible to a sighted reader looking at the right place, it is repeatedly shipped as the whole error state — no message, no accessible announcement, nothing in the markup. WCAG forbids that in two separate criteria, and it is worth being blunt about why: the shake is invisible to a screen reader, invisible to anyone whose attention was elsewhere for four hundred milliseconds, and invisible to a reader who has asked for less motion. It is a supplement. It has never been a signal.

Reveal is the motion most often confused with arrival, and the confusion matters because the two make different claims. Arrival says something is new. Reveal says something was always there and is now uncovered — which is why animating a freshly fetched panel as a reveal is a small lie about where the content came from.

The mechanism carries the meaning. What actually moves in a reveal is not the content but everything below it: the layout opens. That is why height is the property to animate and opacity is the supporting act, and why the same effect done as a fade-in over a fixed-height box feels wrong — nothing made room, so nothing was uncovered.

The thing to keep in proportion is that the animation is not the disclosure. A disclosure is a control with a state, and that state is what an assistive technology reads. The motion is what a sighted reader gets in addition. Build the state first and it will still work with the animation removed, which is exactly what happens for a reader who has asked for less of it.