Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Motion

Animation should explain a change, and anything that does not explain something is delay.

Definition

Interface motion communicates relationships, continuity and state change. Every animation costs time, so its job is to make that time pay for itself by removing a question the user would otherwise have.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Durations that feel right
  3. What motion is for
  4. Reduced motion done properly
  5. In practice
  6. Sources
  7. Continue from here

Durations that feel right

Broad guidance from platform design systems. Larger movements need longer durations.

ChangeDurationEasing
Hover and focus80 to 120msLinear or ease-out.
Small state change, such as a toggle120 to 200msEase-out.
Element entering200 to 300msEase-out, so it decelerates into place.
Element leaving150 to 200msEase-in, and faster than entering.
Full-screen transition300 to 400msEase-in-out.
Anything above 500msToo slow for interface feedbackReserve for narrative moments only.

What motion is for

  • Continuity: showing that an element became another element, so the user does not lose track of it.
  • Spatial relationships: a panel sliding from the right teaches where it came from and where it returns to.
  • Feedback: confirming that an action registered.
  • Attention: drawing the eye to a genuine change, used sparingly because it overrides everything else.
  • Progress: showing that work is happening.

Reduced motion done properly

css
.panel {
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1),
              opacity 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: opacity 120ms ease-out; /* keep the cue, drop the travel */
    transform: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

Feedback is preserved, movement is removed. Setting animation to none entirely can leave users without any confirmation that something happened.

In practice

Shared element transitions

Navigation

Animating a list item into a detail view makes the relationship explicit and removes the moment of disorientation that an instant swap produces.

Motion as decoration

A common failure

Elements fading in on scroll delay reading and add nothing. If removing the animation costs the user no understanding, it was never doing a job.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Mobile AppAn AI ProductAn Onboarding Flow

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.