Motion
Large things land and stop, the keyboard is never behind, and only small direct feedback bounces. Each motion has a time and a curve in the tokens.
The curves
| Motion | Time | Curve | Use |
|---|---|---|---|
| Arrive | 300 ms | 0.05, 0.7, 0.1, 1.0 | A panel growing |
| Arrive, small | 250 ms | 0.05, 0.7, 0.1, 1.0 | A field growing, rows moving to new places |
| Leave | 200 ms | 0.3, 0.0, 0.8, 0.15 | A panel closing |
| Fade | 200 ms | 0.34, 0.8, 0.34, 1.0 | Content fading in after its surface starts moving |
| Fade, fast | 150 ms | 0.31, 0.94, 0.34, 1.0 | Content changing with the selection, rows leaving a filter |
| Hover | 80 ms | Linear | Washes in and out |
| Spring | 350 ms | 0.42, 1.67, 0.21, 0.9 | Small direct feedback only: a switch knob, a pressed button returning |
The rest are timings for small things, each a token too.
| Motion | Time | Curve | Use |
|---|---|---|---|
| Scroll | 200 ms | 0, 0, 0, 1 | A mouse-wheel step |
| Press | 120 ms | 0.215, 0.61, 0.355, 1.0 | A Slab, the transport ring or a slider's knob pressed and returning |
| Tone | 140 ms | Linear | A fill or a knob changing colour |
| Reveal | 110 ms | Linear | A slider's knob appearing and going |
| Dismiss | 100 ms | Linear | A menu going |
| Follow | 120 ms | Linear | Content following its panel: the wait before it fades in, and the time it fades out |
| Sweep | 1400 ms | 0.455, 0.03, 0.515, 0.955 | One pass of the stretch along a line while the end is not known |
| Notice | 6000 ms | Linear | How long a notice stays; it waits while the pointer is on it or the keyboard is in it |
| Confirm wait | 4000 ms | Linear | How long an action that asks waits for the second press before it goes back to its words |
| Bar stays | 900 ms | Linear | How long the scroll bar stays after the view stops |
Sweep is the only endless motion: the page header's reading line and an endless progress.
Large things land and stop
Arrive decelerates hard and ends still. A panel reaches nearly all its width early and then settles, so it looks finished when it is. A curve that overshoots makes a large surface look finished and still moving, so it is not used on panels or lists.
Leave is faster than Arrive. Closing is a decision already made; 200 ms against 300.
The content follows
A panel's content travels with its edge and fades in (Fade, 200 ms) 120 ms after the panel starts to open (Follow), so it does not appear on a surface that has not arrived. When the selection changes, the panel's content changes with Fade, fast. When a filter removes rows, the rows that leave fade first (150 ms), then the rows that stay move up (Arrive, small, 250 ms).
The keyboard is never behind
A selection that follows a held arrow key jumps to the next row and keeps up with the key. It does not glide, because a glide that lags the key is a lie about where the keyboard is.
Hover and spring
Hover is 80 ms and linear: a wash in, a wash out. Spring is the one overshooting curve, for the small, direct thing a person just touched: a switch knob, a button that was pressed and returns. A pressed Slab scales to 0.97 over Press.
Reduced motion
Every duration goes through one function, Kit.ms(), so Kit.reducedMotion makes all of them 0 ms together. Accessibility says how it is set.
Experimental, in Tacit.Kit 0.1.
Text and figures: CC BY 4.0. Tacit.Kit: LGPL-3.0 code, OFL fonts. The Tacit name.