Motion Design in UI: Principles, Timing and Easing

The short answer

Good UI motion is functional. It shows where an element came from, where it went, what changed and that the system responded to an action. If a movement cannot be justified by one of those jobs, remove or simplify it. The basics: keep it quick, use natural deceleration, avoid several movements competing at once and provide an alternative for people who turned motion off in their system settings.

Why motion at all

• Feedback: a press, loading, a successful save.
• Orientation: a screen transition shows where the user is in the hierarchy.
• Continuity: a card expands into a detail page, so it is clearly the same object.
• Attention: gently drawing the eye to a new notification or an error.
• Brand character: only on top of the above, never instead of it.

Duration

There are no universal exact values, but there are working guidelines:

How to choose:

• the larger the distance and area, the longer the animation;
• exits are usually slightly faster than entrances;
• motion on phones is shorter than on large monitors;
• frequent actions need the fastest animations because people see them hundreds of times.

Easing

Real objects do not start or stop instantly, so linear motion looks mechanical. It fits opacity fades, infinite loaders and progress bars.

• ease-out (decelerating) for entering: the element arrives fast and settles softly.
• ease-in (accelerating) for leaving: the element speeds up and exits.
• ease-in-out for moving from one point to another within the screen.
• spring physics for gestures and dragging, where momentum matters.

In code, curves are defined with cubic-bezier(). Keep 3 or 4 named curves in your design system instead of ad hoc values in every file.

Choreography

When several elements move, they need an order:

• one focal point at a time: the main movement leads, the rest supports;
• stagger: a small delay between list items shows their sequence, but the total duration must not grow without limit;
• consistent direction: elements enter and leave in a way that matches the navigation;
• shared element: a common element flows between screens and connects them.

Reduced motion

Some people enable the reduce motion setting in their OS because animation causes discomfort or dizziness. Respect it: replace slides and scaling with a soft opacity change, and turn off parallax and autoplay.

:root {
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

.panel {
  transition: transform var(--motion-base) var(--ease-out),
              opacity var(--motion-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .panel { transition: opacity var(--motion-fast) linear; }
}

How to spec animation for developers

A "make it like this" video is not enough. For each animation specify:

1. Trigger: what starts it.
2. Properties: what changes and from which value to which (position, scale, opacity).
3. Duration and delay: in milliseconds or as a token.
4. Easing: a named curve or a cubic-bezier.
5. Interruption: what happens if the user taps again mid-animation.
6. Reduced-motion variant.

A Figma prototype or video conveys the feel; a parameter table conveys precision. Animate transform and opacity where possible, because browsers handle them more efficiently than changes to size and spacing.