Why motion matters

EssayOct 11, 20267 min read

Notes on easing, timing and the small physics that make an interface feel considered.

An interface is a list of states. A menu is closed, then open. A card sits in a grid, then fills the screen. A button says Save, then Saved. Without motion, the screen jumps from one state to the next and leaves you to work out what changed. Motion is the part that explains it.

That is the whole case for animation in product work. Not decoration, not delight for its own sake, but continuity. When something travels from where it was to where it is going, your eye follows it and you never lose your place. When it teleports, you spend a fraction of a second rebuilding the scene in your head. Do that a hundred times a day and a product feels heavier than it really is.

Motion answers questions

Good motion answers one of three questions before anyone has to ask it: where did this come from, where did it go, and what just changed? A popover that grows out of the button you pressed answers the first. A toast that slides back the way it came answers the second. A number that rolls to its new value answers the third.

If an animation doesn’t answer any of them, it is probably decoration, and decoration is the first thing I cut.

Easing is the personality

Two animations with the same duration can feel nothing alike, because what you notice is not how long something takes but how it spends its speed along the way. That distribution is the easing curve.

Fig. 1 The same trip under three curves. Back to front: linear, ease-in, ease-out. Each faint outline is where the block sits after an equal slice of time, so the spacing is the curve.

Linear spends its speed evenly, which reads as mechanical: nothing in the physical world starts and stops like that. Ease-in starts slowly and finishes fast. That suits things on their way out, but on anything the user triggered it feels like the interface is hesitating. Ease-out is the one I reach for most. It moves the instant you ask and spends the rest of its time settling, so the response feels immediate and the arrival feels soft.

The built-in curves are timid. Most of the motion on this site runs on cubic-bezier(0.22, 1, 0.36, 1), an ease-out with a long, gentle tail. Things that move from one place on screen to another, rather than appearing or responding, get an ease-in-out instead, so they accelerate and brake like an object would.

Short, and shorter the more often you see it

Most interface motion belongs between 150 and 300 milliseconds: long enough for the eye to track, short enough that nobody waits on it. Longer distances can take a little longer. Exits should be quicker than entrances, because nobody needs to watch something leave.

How often something happens matters as much as how long it takes. A flourish you see once, like the way this site types out its own introduction, can afford to take its time. Something you trigger dozens of times a day, like a command palette or a keyboard shortcut, should barely animate at all. Delight that repeats turns into friction.

Things grow from somewhere

Physical objects come from somewhere. A dropdown should open out of its trigger, not materialise in the empty space below it. In CSS that is a single property, transform-origin, and it does more for the relationship between two elements than any amount of easing.

Fig. 2 Left: the panel scales from its own centre and arrives from nowhere. Right: it scales from the edge of its button, so you can see what opened it. The dot is the transform origin.

Two smaller rules come from the same idea. Don’t scale up from zero, because nothing in the real world appears out of a single point; start around scale(0.95) and let opacity carry the rest. And let things leave along the path they arrived by, so the exit undoes the entrance instead of inventing a new movement.

Let people change their minds

People don’t wait for animations to finish. They open a menu and close it straight away, sweep the cursor across a row of items, drag something halfway and let go. If the motion can’t change course mid-flight, the interface feels broken in exactly those moments.

Fig. 3 Move your cursor along the figure. The back block plays a fixed animation and won’t change course until it finishes. The blue one is a spring: it turns the moment the target moves.

This is why springs feel alive. A spring has no duration; it has a position, a velocity and a target. Every new target simply becomes the new resting point, and the spring carries its current velocity into the turn instead of starting over. In CSS the same split exists in a smaller form: transitions retarget from wherever they are, while keyframe animations run a fixed timeline. Use transitions for anything interactive and keep keyframes for sequences that play once.

Choreography

When a whole block enters at once, the eye has nowhere to start. Splitting it into a few pieces and offsetting them by 60 to 100 milliseconds gives the reader a path through it: heading, then text, then actions.

Fig. 4 Left: the dialog lands as one block. Right: heading, text and buttons arrive about 100ms apart, which gives the eye a path. Both leave together, quickly.

The trick is restraint. Stagger a handful of groups rather than every element, and keep the whole sequence under half a second or it starts to feel like a slideshow. The project tiles in my introduction pop in one at a time for this reason, and the cards under them wait for the sentence that introduces them to finish.

Cheap to run

Motion that stutters is worse than no motion at all. Browsers can animate transform and opacity without recalculating layout, so those two properties should carry almost everything. Animating width, height, top or margin forces layout on every frame. Blur looks lovely in small doses but gets expensive over large areas, so keep it to small elements and short durations.

Respect the setting

Some people get genuinely unwell from movement on screen, and they tell you so through prefers-reduced-motion. Respecting it doesn’t mean removing all feedback. Swap travel for a fade, keep state changes visible, and drop the decorative loops. The figures in this post stop moving and show their final frame when that setting is on.

Taste

All of this comes down to one test: does the motion feel inevitable? The best animations are the ones nobody mentions. The interface just seems to understand what you meant. When people notice the animation itself, it is usually too slow, too big or too frequent.

Before I ship anything that moves, I run through the same short list:

01Does it answer a question: where from, where to, or what changed?
02Is it under 300ms, and shorter still if it happens often?
03Does it ease out, and grow from the right origin?
04Can it be interrupted halfway through?
05Is it only moving transform and opacity?
06What does it do with reduced motion turned on?