Skip to content
motion lab

03 Web motion

Interface motion that feels instant, stays out of the way and respects reduced motion.

Floor
03 of 09
Demos
Transition tuner
Skills
impeccable

Motion with a job

Interface motion earns its place when it does one of three jobs: it shows where something came from or went, it confirms that an action worked, or it points the eye at what changed. If an animation does none of these, it is decoration, and decoration in an interface costs time on every single click.

That is why web motion is faster than video motion. Someone watching a film has chosen to watch. Someone using a menu wants the menu.

Transition tuner

A real menu. Tune how it opens and closes, then feel the difference by clicking it yourself. The CSS updates as you go.

Launch film v3

0:30 · 1080p

Open
220 ms
Close
154 ms
Last item
340 ms

Noticeable. The motion itself is now something the user waits for.

220 ms
Easing
8 px
30 ms
.menu {
  transform-origin: top right;
  transition:
    opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.menu[data-state="closed"] {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  transition-duration: 154ms;
  transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}

.menu-item {
  transition: inherit;
  transition-delay: calc(var(--i) * 30ms);
}

.menu[data-state="closed"] .menu-item {
  opacity: 0;
  transform: translateY(-4px);
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu-item {
    transform: none !important;
    transition: opacity 150ms linear;
  }
}

Fast in, faster out

Entrances can take a little longer because the user is about to read what arrives. Exits should get out of the way: about a third shorter, with ease-in so they accelerate off. Staggering items by 20 to 40 ms makes a list read as a group; more than that and the last item feels late.

Animate transform and opacity

Browsers can move, scale, rotate and fade an element on the compositor without recalculating the page layout. Animating width, height, top or margin forces layout on every frame, which is where jank comes from on slower phones.

Respect reduced motion

Some people get dizzy or nauseous from movement on screen, and they tell the operating system so. The prefers-reduced-motion media query exposes that setting. Respecting it does not mean removing feedback: swap movement for a short fade, as the toggle in the demo does, so the change is still visible.

Rules of thumb

  • Feedback on press: under 100 ms. Menus, popovers, tooltips: 150 to 250 ms. Page-level changes: 250 to 400 ms.
  • Enter with ease-out, leave with ease-in, move across the screen with ease-in-out.
  • Origin matters: a menu should grow from the button that opened it.
  • Never block input while something animates. Clicking again should interrupt, not queue.
  • Test with reduced motion turned on, the same way you test with a keyboard.