Duration scales with size

Small elements stay under 200ms; large surfaces get 300 to 500ms.

Emil Kowalski@emilkowalski
Animation duration should scale with the size of the animated element. Small UI elements like dropdowns can feel great under ~200ms. But large transitions, like full-screen menus, need more time to avoid feeling abrupt since they feel "heavier". Here's 150ms vs 300ms:
Apr 13, 2026View on X ↗
Emil KowalskiBuilding a drawer component
Duration of 500ms is also supposed to mimic iOS's Sheet.
emilkowal.skiRead article ↗

From emil-design-eng, “How fast should it be?”.

Full-screen menu: 150 vs 300ms

Toggle both, then drag the right menu’s duration.

150msAbrupt
--d: 150ms
300msSettled
--d: 300ms
.menu {
  --d: 300ms;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d) var(--ease-out);
}
.menu[data-open] { clip-path: inset(0); }
.menu li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d) var(--ease-out), transform var(--d) var(--ease-out);
}
.menu[data-open] li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * var(--d) * 0.12);
}

One duration cannot fit both

Open both, then find one duration that suits both.

Dropdown · 240pxSnappy
    transform 150ms var(--ease-out)
    Sheet · full heightAbrupt
    transform 150ms var(--ease-drawer)

    The duration ladder

    Press Play in each mode.

    Duration mode

    Tooltip125ms

    Dropdown180ms

    Modal250ms

    Sheet500ms

    :root {
  --dur-tooltip: 125ms;
  --dur-dropdown: 180ms;
  --dur-modal: 250ms;
  --dur-menu: 300ms;
  --dur-sheet: 500ms;
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
.sheet { transition: transform var(--dur-sheet) var(--ease-drawer); }

    Why it matters, pros and cons

    Why it matters

    Size reads as mass. A full-screen surface at tooltip speed seems to teleport.

    Pros

    • Small, frequent UI stays fast.
    • Large surfaces stay trackable.
    • One token per size tier.

    Cons

    • Frequent sheets can go shorter.
    • 500ms needs the drawer curve; plain ease drags.
    • Keyboard-triggered surfaces skip animation at any size.