Motion
Typing, scrambles, wipes and connectors that draw; ease-out, no springs.
Marks that move
Running
ingest-pr
Run
By job
| Job | Time | Curve | What moves |
|---|---|---|---|
| Press | --dur-press 80ms | --ease-out | The fill steps to its held colour and a button's light goes out; nothing scales |
| Light | --dur-light 240ms | --ease-soft | A primary or secondary button's fill and edge lighten under the pointer and settle back after; its light from below follows on --dur-glow |
| State | --dur-state 120ms | --ease-out | Hover washes, a field's edge, a check; a state flip on a run (running to failed) is a cut |
| Overlay in | --dur-overlay 160ms | --ease-out | A menu, popover or tooltip fades in as it slides --overlay-shift from its trigger; a dialog only fades (overlay-motion) |
| Overlay out | --dur-state 120ms | --ease-in | It leaves the way it came, faster |
| Wipe | --dur-wipe 240ms | --ease-linear | A region, a meter fill or a bar arrives along its rule from the start edge (wipe) |
| Draw | --dur-draw 300ms | --ease-out | A connector draws out from its node, one hop at a time, and ends in a square (draw) |
| Type | --dur-type 18ms | --ease-linear | A label or a headline types in a character at a time behind the caret, then the caret goes |
| Scramble | --dur-scramble 400ms | --ease-linear | A mono label resolves from random glyphs, start to end, once, when it first appears or its value changes |
| Pending | --dur-pending 800ms | steps(4) | One lit square steps along four, a loop |
Tokens
15 tokens
--dur-press- 80ms
--dur-state- 120ms
--dur-overlay- 160ms
--dur-wipe- 240ms
--dur-draw- 300ms
--dur-type- 18ms
--dur-scramble- 400ms
--dur-pending- 800ms
--overlay-shift- 4px
--dur-light- 240ms
--dur-glow- 320ms
--ease-out- cubic-bezier(0.2, 0.8, 0.2, 1)
--ease-soft- cubic-bezier(0.22, 0.8, 0.24, 1)
--ease-in- cubic-bezier(0.4, 0, 1, 1)
--ease-linear- linear