Motion Lab
Ten small interactions, each built twice: the way they usually ship, and the considered way. Flip a demo between Typical and Considered, then read its score: when it starts, how long it takes, which curve it follows. The thin red line on every score is the 300 ms budget for interface motion.
Button press
feedback, tens of times a day
A press should answer the finger the moment it lands. Hold the second button: the deliberate part is slow, the release is quick.
| Typical | Considered | |
|---|---|---|
| Curve | transition: all, ease-in | transform only, strong ease-out (0.23, 1, 0.32, 1) |
| Duration | 300 ms, shows on release | 160 ms, shows on pointer-down |
| Origin | colour change only, nothing physical | scale(0.97) from centre; the label shrinks with it |
| Interruption | hold fill drains as slowly as it filled | asymmetric: fills in 2 s linear, snaps back in 200 ms |
| Reduced motion | unchanged | no scale; the colour and the fill stay, because they carry meaning |
Toast stack
feedback with spatial consistency, occasional
Press the button quickly, several times. Hover the stack to fan it out and pause the timers; swipe a toast down or sideways to dismiss it.
| Typical | Considered | |
|---|---|---|
| Curve | keyframes, ease-in | CSS transitions, plain ease: a touch softer to suit a calm component |
| Duration | 500 ms, older toasts jump | 400 ms; the stack shifts with the same transition |
| Origin | drops from above, vanishes in place | enters from the bottom edge and leaves the same way |
| Interruption | keyframes restart from zero when you spam it | transitions retarget mid-flight; timers pause on hover and in a hidden tab |
| Reduced motion | same slide | fade only, no travel |
Bottom sheet
direct manipulation, occasional
Open the sheet and drag it by any part. A small quick flick closes it; a slow drag that stops halfway springs back. Pull up past the top to feel the edge.
Trip, 14 Dec
Share trip
- Copy link
- Send by message
- Add to calendar
| Typical | Considered | |
|---|---|---|
| Curve | bottom with ease-in (a layout property) | opens on the drawer curve (0.32, 0.72, 0, 1); release is a spring |
| Duration | 300 ms either way | 500 ms to open; after a drag the spring settles in about 350 ms |
| Origin | no drag; buttons only | tracks the finger 1:1 from where you grabbed, rubber-bands past the top |
| Interruption | locked while it moves | grab it mid-flight; the release hands your speed to the spring, and a flick faster than 0.11 px/ms dismisses |
| Reduced motion | same slide | 200 ms fade; drag still works because you are moving it |
Staggered list
choreography, occasional
Show the list, remove a row, add one. Watch the gap: in the considered version the neighbours close it while the row is still fading.
| Typical | Considered | |
|---|---|---|
| Curve | ease-in, 24 px rise for every row | ease-out; the first row rises 12 px, the rest 6 px |
| Duration | 150 ms between each row, all equal: about 1.2 s | gaps shrink 40, 35, 30, 25, 20 ms; the group is done by 450 ms |
| Origin | exits one by one in reverse; a removed row leaves a hole, then the list jumps | exits all at once, faster; a removed row leaves the flow at once and its neighbours glide up together |
| Interruption | buttons wait for the queue | every row is clickable the moment it is visible |
| Reduced motion | same cascade | no delays, no travel: the group fades in together |
Card to detail
shared element, occasional
Open a card. The cover and title travel to their new place, so you never lose track of what you opened. Close it halfway through to see it reverse from where it is.
A sample route card. Start early, carry water, and take the shaded path back after noon.
| Typical | Considered | |
|---|---|---|
| Curve | ease-in pop | strong ease-in-out (0.77, 0, 0.175, 1): it is moving on screen |
| Duration | 400 ms in, closes instantly | 350 ms in, 280 ms back (exits are quicker) |
| Origin | a box grows from scale(0) in the middle, unrelated to the card | FLIP: cover and title fly from the card; the panel opens from the card's own rectangle |
| Interruption | none | close mid-flight and the same animations play backwards from where they are |
| Reduced motion | same pop | 200 ms crossfade in place |
Number ticker
state indication, tens of times a day
Change the number quickly. Each digit rolls only as far as it needs to, and the figures never shift sideways.
Sample count
| Typical | Considered | |
|---|---|---|
| Curve | linear count in a timer | each digit column rolls with strong ease-out |
| Duration | 1.5 s of counting before you can read it | 300 ms, readable at once |
| Origin | proportional figures: the number wobbles in width | tabular figures; each digit is a fixed-width column |
| Interruption | every new value restarts the 1.5 s count | transitions retarget, so a new value bends the roll |
| Reduced motion | same counting | changed digits crossfade; the final value is announced once |
Tooltips and hover cards
wayfinding, tens of times a day
Sweep the pointer across the toolbar. The first tip waits; once one is open, its neighbours appear at once. Then rest on the underlined link and move into its card.
On a touch screen there are no hover tips, on purpose: a tap would fire them by accident.
Read the field notes before you start.
Field notes
Twelve short pages on pacing, water and shade. Sample content.
| Typical | Considered | |
|---|---|---|
| Curve | ease-in from scale(0) | ease-out from scale(0.97) + opacity |
| Duration | no delay, 300 ms each, every neighbour animates again | 500 ms delay, 125 ms fade; neighbours open instantly for 300 ms after one closes |
| Origin | grows from its own centre | grows out of the button it describes; the card grows out of the link |
| Interruption | the card closes the moment you leave the link, so you can't reach it | 250 ms grace to cross into the card; keyboard focus shows the tip with no animation |
| Reduced motion | same grow | opacity only; touch screens skip hover tips entirely |
View transition
navigation, tens of times a day
Open a message, then go back. Forward and back move in opposite directions, and the subject line carries over between the two screens.
| Typical | Considered | |
|---|---|---|
| Curve | ease-in-out slide, full width | ease-out, a 24 px shift plus crossfade (small container, small move) |
| Duration | old view leaves (450 ms), then the new one enters (450 ms) | both at once, 240 ms, via the View Transitions API |
| Origin | always slides left, even going back | direction-aware; the subject is a shared element |
| Interruption | taps during the queue are lost | a new navigation skips the running transition |
| Reduced motion | same slide | 150 ms crossfade, no shift |
Accordion
state change, tens of times a day
Open and close a row, then click it twice fast. The typical version animates to a made-up height, so it lags on close.
Two to four working days in most cities. Sample answer.
Yes, until it is packed. Open the order and choose Edit. After packing, you can still change the address by message. Sample answer.
Not yet. Sample answer.
| Typical | Considered | |
|---|---|---|
| Curve | max-height: 1000px with ease-in; chevron on linear | measured height, strong ease-out; chevron on the same curve |
| Duration | 600 ms to a height it never reaches: open looks cut short, close waits before moving | 220 ms open, 180 ms close, panel and chevron in one timing family |
| Origin | content pops at full opacity | content fades with the height so the two read as one |
| Interruption | a second click jumps | reverses from the current height |
| Reduced motion | same | no height animation; the text fades in 150 ms |
Tab indicator
state change, many times a day
Click between tabs, then use the arrow keys. The pill and its text change colour in perfect step because they are one clipped layer. From the keyboard there is no animation at all.
Overview: a sample summary of the space.
| Typical | Considered | |
|---|---|---|
| Curve | underline moves left and width with ease-in | clip-path on a duplicate, active-styled tab row; strong ease-in-out |
| Duration | 400 ms, text colour flips instantly, panel fades in 300 ms every time | 250 ms; the panel swaps instantly (seen too often to animate) |
| Origin | line and label change out of step | pill and label are one layer, so they can't drift apart |
| Interruption | layout animation, retargets with a jolt | clip-path transition retargets smoothly; arrow keys move it with no animation |
| Reduced motion | same | the pill jumps; no travel |
Vocabulary
The terms used on this page, so you can ask for exactly the motion you want.