Shots in this scene
Duration, Distance and Size
In one line
How long should motion take? Nielsen Norman Group's starting points: about 100 ms for feedback, 200 to 300 ms for modals, up to 400 ms for large movement, 500 ms as the upper limit. Longer trips take longer, and things enter a little slower than they leave.
Think of it like this
A door closes with a click, a heavy garage door rumbles down. How long a move takes tells you how big and how serious it is, before you read a word.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- upper limit
- About 500 ms: past it, motion feels like waiting.
- starting point
- A number to try first and adjust after testing, not a rule.
- px per ms
- Speed of a move: distance divided by duration.
- reversing shortening
- The browser shortens a transition that is reversed part-way, in proportion to its progress.
Step by step
01Pick the rung
Feedback is about 100 ms, something over the page 200 to 300 ms, a big movement up to 400 ms.
02Scale for distance
Add time for long trips and cap it. A 20 px nudge and a 600 px slide should not share a number.
03Split enter and exit
Make the exit a little shorter with ease-in, the entrance a little longer with ease-out.
04Test on the slow device
Check it on a low-end phone. If it drops frames it will feel longer than the number.
Try it yourself
- 1
Compare fixed and scaled
In "Longer trips take longer", press the first button, then the second, and read the four
div.chiptracks each time: 200, 200, 200, 200 ms, then 130, 180, 270, 400 ms. At 200 ms the 20 px chip moves 0.1 px per ms and the 560 px chip 2.8. - 2
Interrupt the dialog
In "Enter slower, leave faster", press Open and Close about 100 ms later (pause at 0.1× to be exact). At 100 ms the dialog is at opacity 0.49, and the new exit track is 88 ms long, ease-in.
Code & diagrams
Press Play on each rung, then slow the timeline to 0.1× and compare the tracks. The splash is red and flagged: it breaks the 500 ms limit.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Expected console output
simple feedback: 100 ms
modal opening: 250 ms
large movement: 400 ms
the upper limit: 500 ms
a welcome splash: 900 ms (over the 500 ms upper limit)Press the first button: four chips travel 20, 120, 300 and 560 px, all in 200 ms, so the last is 28 times faster than the first. Press the second: 130, 180, 270 and 400 ms.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Expected console output
20 px -> 130 ms (0.15 px per ms)
40 px -> 140 ms (0.29 px per ms)
120 px -> 180 ms (0.67 px per ms)
240 px -> 240 ms (1.00 px per ms)
480 px -> 360 ms (1.33 px per ms)
1000 px -> 400 ms (2.50 px per ms)Open, then Close, and compare the two tracks: 250 ms ease-out in, 180 ms ease-in out. Now open and press Close after about 100 ms: the exit is shorter still.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Press Reserve and Done five times in each. Which dialog would you rather meet on a shop?
A 180 ms
B 600 ms
Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Remove the cap
In "Longer trips take longer", change Math.min(400, Math.round(120 + px * 0.5)) to Math.round(120 + px * 0.5) and press Run.
Break #2
Use one transition for both directions
In "Enter slower, leave faster", change .open's 250ms ease-out to 180ms ease-in for both properties, then press Open.
Myth vs fact
Myth
Faster is always better.
Fact
A large move in 100 ms is a jolt. Fit the duration to the size of the change, within the ceiling.
Myth
Every animation on the site should use the same duration.
Fact
Use a few shared values: a tooltip and a drawer are different sizes of change.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
Durations are frame budgets: 100 ms is 6 frames at 60 Hz, 12 at 120 Hz (Topic 1.1). On a phone that drops frames, perceived time grows, so the cheapest speed-up is a cheaper property (Phase 6), not a shorter number.
- ▸
Material 3 Expressive (2025) replaces Material's easing-and-duration system with spring tokens. Phase 9 builds springs, which have no fixed duration at all.
Remember this
- 1
The problem this solves: durations picked by feel drift. One panel takes 180 ms, another 350, another 700, and the site feels inconsistent. The most common error is too slow. This topic gives you numbers to start from, and the reasons behind them.
- 2
The ladder. Nielsen Norman Group gives: simple feedback about 100 ms, modals 200 to 300 ms, large movement up to 400 ms, and 500 ms as an upper limit. These are starting points from a usability research group, not laws: test on real people. The first example plays each rung and flags a 900 ms splash as over the limit.
- 3
Why these numbers. About 100 ms is about 6 frames at 60 Hz (12 at 120 Hz) and feels instant (Topic 1.5). Past about half a second a person is waiting, not watching. A budget in frames is the same budget at any refresh rate only if the motion is time-based (Topic 1.3).
- 4
Distance matters. The same 200 ms is fast for a 560 px move and slow for 20 px: speed is distance divided by time. So longer trips get longer durations, with a cap. The second example uses Lumen's own rule of thumb (an example, not a standard): 120 ms plus half a millisecond per pixel, never over 400 ms. 20 px gets 130 ms, 300 px gets 270 ms, and 1000 px is capped at 400 ms.
- 5
Enter slower than exit. NN/g advises entering slightly slower than leaving, with ease-out going in and ease-in going out (Topic 5.3). A thing arriving must be seen; a thing leaving has already been seen. The dialog example enters in 250 ms and leaves in 180 ms.
- 6
Interrupted exits shorten. If you close the dialog while it is still arriving, the browser reverses the transition and shortens it in proportion to how far it got. Closing at 100 ms made the exit 88 ms long, not 180 (Topic 3.4 explains the maths).
- 7
Size and device. Bigger surfaces travel further and so take longer than small ones; a tooltip is fast, a full-screen sheet slow. A phone screen is small, so the same rule gives shorter times. Lena's cheap Android may drop frames, which makes any duration feel longer (Phase 6). Use three durations, fast, base and slow, and share them as tokens (the build topic).
Explain it without notes
State the NN/g durations and say why 500 ms is an upper limit.
Why should a long move get more time than a short one?
Why should a dialog leave faster than it arrives?
Practice
Write a durationFor for sizes: a tooltip, a popover and a full-screen sheet. Pick numbers from the ladder.
Give the toast an enter of 220 ms ease-out and an exit of 120 ms ease-in using the transition pattern from the dialog.
Done when you can
You can state the NN/g durations and the 500 ms limit
You can scale a duration with distance and cap it
You can give a component different enter and exit transitions
You know what happens when a transition is reversed part-way