Skip to content
UX Atlas
Plate FND·052 · UI foundationGrid C1 · Rev. 2026-08-14

Motion

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

UI foundationCraft conventionIntermediate

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 plate
  1. 1Definition
  2. 2Durations that feel right
  3. 3What motion is for
  4. 4Reduced motion done properly
  5. 5Motion that earns its place
  6. 6In practice
  7. 7Local chart
  8. 8Sources
  9. 9Continue from here

Reach for this when

  • Designing transitions between states or views.
  • Specifying component behaviour in a design system.
  • Auditing performance and accessibility.

Common mistakes

  • Animation without a communicative purpose.
  • Durations over 400ms for routine feedback.
  • Animating layout properties rather than transform and opacity.
  • Ignoring reduced-motion preferences.
  • Implementing prefers-reduced-motion as disabling everything, when the requirement is reducing motion rather than removing feedback.

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.

Motion that earns its place

Do

  • Animate transform and opacity, which the compositor can handle without reflow.
  • Let motion show where something came from, so the reader does not have to re-find it.
  • Make every animation interruptible, so a second click is not queued behind the first.
  • Shorten the duration of anything the reader triggers dozens of times a day.

Do not

  • Animate width, height, top or left, which forces layout on every frame.
  • Add motion to a screen that appears during a wait, where it competes with the progress signal.
  • Animate more than one or two elements per view.
  • Treat reduced motion as a switch that turns feedback off rather than one that removes travel.

In practice

  1. i.

    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.

  2. ii.

    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.

  3. iii.

    The animation that was fine once

    Frequency changes the calculation

    A 400 millisecond expand felt considered in review and intolerable by the fortieth use of the day. Motion the reader triggers repeatedly has a much tighter budget than motion they see once.

Local chart

FND·052 · Region II · Grid C1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

CarouselCMP·027 · APPLIED THROUGHDrawer and SheetCMP·011 · APPLIED THROUGHLoading StatesPAT·011 · APPLIED THROUGHSkeleton ScreensPAT·012 · APPLIED THROUGHVisibility of System StatusHEUR·001 · PRINCIPLES BEHIND THISDoherty ThresholdLAW·006 · PRINCIPLES BEHIND THISFeedbackPRIN·004 · PRINCIPLES BEHIND THISSelective AttentionPSY·004 · PRINCIPLES BEHIND THISFramerTOOL·004 · OFTEN USED WITHOrigami StudioTOOL·013 · OFTEN USED WITHProtoPieTOOL·011 · OFTEN USED WITHInteraction DesignTERM·034 · SHORT DEFINITION

Sources

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

  1. [1]
  2. [2]

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.