Duration by size and context

Small elements move faster than large ones; the product sets budget.

Emil Kowalski@emilkowalski

Working on agent skills for https://t.co/RP4FIdUZHG. It’ll contain all the animation frameworks I teach, from choosing the right duration to keeping animations performant. Here’s a small snippet of the skill[.]md file on picking the right easing:

Jan 14, 2026View on X ↗

Emil Kowalski@emilkowalski

7 Practical Animation Tips https://t.co/JVTEaSAgan

Sep 30, 2025View on X ↗

From design-motion-principles, Duration Guidelines.

Size sets the clock

Press Show, then drag the bad pane’s duration.

One duration (bad pane) 300ms

One duration for allBad

Filter: Open

Invoice #1042Due in 3 days

DetailsLine items, history, attachments

300 / 300 / 300ms

Scaled to sizeGood

Filter: Open

Invoice #1042Due in 3 days

DetailsLine items, history, attachments

150 / 200 / 300ms

:root { --dur-sm: 150ms; --dur-md: 200ms; --dur-lg: 300ms; }
.chip { transition: transform var(--dur-sm) var(--ease-out); }
.panel { transition: transform var(--dur-lg) var(--ease-drawer); }

Context sets the budget

Pick a product and timing, then open the menu.

Product Productivity tool Consumer app Kids site

Menu timing 180ms ease-out 350ms ease-out 600ms bounce

Issue trackerFits

transition: transform 180ms var(--ease-out)

Context	Budget	Voice
Productivity UI	under 300ms, 180ms ideal	Emil
Production polish	200–500ms	Jakub
Creative, kids, playful	whatever serves the effect	Jhey

[data-product="productivity"] { --menu-dur: 180ms; }
[data-product="consumer"] { --menu-dur: 350ms; }
.menu { transition: transform var(--menu-dur) var(--ease-out), opacity var(--menu-dur) ease; }

Match the codebase

Type a message and press Save.

150ms ease-out toastBad

Edit invoice

toast: 150mssheet: spring

Uses the app’s springGood

Edit invoice

toast: springsheet: spring

export const SPRING = { stiffness: 300, damping: 35 };
sheet.animate({ y: "100%" }, SPRING);
toast.animate({ y: 0, opacity: 1 }, SPRING);

Why it matters

Slow small things lag; fast big things jump. How often it runs sets the budget.

Pros

Small things feel instant, big things physical.
The budget follows the product.
Three tokens cover most cases.

Cons

Over 300ms is context-dependent, not automatically wrong.
Don’t copy existing durations that are already wrong.
Keyboard and high-frequency actions skip animation entirely.