# Motion

## Purpose

Durations, easing and the role of animation.

## Decisions

### Motion

**Speeds:** three steps, each used for a family of interactions. Exits use the same speed as entrances.

| Step | Duration | Used for |
|---|---|---|
| Fast | 120ms | Hover and press colour changes, focus border and ring, checkbox tick, radio dot |
| Medium | 200ms | Switch thumb, chevron flip, tab change, menus, popovers and tooltips appearing and leaving, progress bar fill, list items sliding to fill gaps or reorder, cards lifting on hover |
| Slow | 320ms | Dialogs and side panels, toasts sliding in and out, page and tab-content transitions |

**Easing:** motion slows down on the way in and speeds up on the way out. The **enter** curve is `cubic-bezier(0.2, 0, 0, 1)`, and the **exit** curve is its mirror image, `cubic-bezier(1, 0, 0.8, 1)`.

**What moves:** the expressive set: everything in the table above, including list reordering, card lift on hover and page and tab-content transitions.

**Loading:** the gradient spinner for actions (and for content with no predictable shape), and a **shimmering skeleton** for content whose layout is known.

**Pressing a button:** the button also shrinks slightly as well as darkening. The label must not scale or shift: only the button's fill and border shrink. The shrink is **98%**.

**Reduced motion:** movement is removed, but colour and opacity still fade quickly (about 100ms).

**Tooltips and hover menus:** they appear after a **400ms** delay, so a stray hover (for example while middle-clicking a link) does not pop one up straight away.