Micro-interactions Matter

Micro-interactions do three jobs. They confirm that an action registered — a button that depresses, a toggle that slides. They communicate state — a spinner, a progress bar, a field turning valid. And they direct attention — a new item easing into a list rather than appearing from nowhere.

All three are fundamentally about answering a question the user would otherwise have to guess at: did that work? Is something happening? What changed? An interface that answers those questions instantly feels responsive even when the underlying operation is slow.

Personality is a fourth job, and the one most often mistaken for the whole point. It is real, but it is a bonus on top of a functional interaction, never a substitute for one.

Most interface animation should sit between 150 and 300 milliseconds. Below roughly 100ms the change is not perceived as motion at all; above 400ms the user is waiting for the interface rather than using it.

Match the duration to the distance travelled and the size of the element. A small hover state can be quick and snappy; a full-screen panel sliding in needs slightly longer or it reads as a jump cut. Applying one duration to every animation on the site is the most common cause of motion that feels subtly wrong.

Easing carries as much meaning as duration. Elements entering the screen should decelerate into place; elements leaving should accelerate away. Linear easing looks mechanical because almost nothing in the physical world moves at a constant speed.

Animate transform and opacity wherever possible. Both can be handled by the compositor without triggering layout or paint, which is what keeps animation smooth at 60fps.

Animating properties like width, height, top or margin forces the browser to recalculate layout on every frame. On a desktop machine you may not notice. On a mid-range phone, that is exactly where scroll animation turns janky.

Be sparing with will-change. It is a genuine optimisation when applied to a specific element about to animate, and a genuine memory problem when applied broadly and left in place.

For users with vestibular disorders, large parallax and scroll-triggered motion can cause real nausea and dizziness. This is not a preference to be talked out of.

Honour the prefers-reduced-motion media query. That does not mean stripping all feedback — it means replacing movement with something static: cross-fade instead of slide, instant state change instead of an animated one. The interaction should still confirm what happened.

The last rule is the simplest: never make someone wait on decoration. If an animation delays access to content or has to finish before the next action can be taken, it has stopped being feedback and started being an obstacle.