Motion
A small, deliberate set of motions. Each one is used for a specific kind of change, not decoration. Press play on any of them.
Turn on Reduce motion to see them as someone with that phone setting does. It starts at your own phone’s setting and changes this page only.
Fade in · 350ms
New content mounting into an already-visible page (a staged place added to Where). Opacity only, no movement: a slide felt fussy for how often this fires.
Grow in · 250ms
A real scale and fade, kept for a genuine first appearance (the image preview when a photo is first selected). Plays once, never on every update.
Height ease · 300ms
Crossfading between two differently-sized views in the same card (an add form swapping for a list). The whole card resizes smoothly instead of snapping.
Collapse / reveal · 300ms
A list row growing in or shrinking away (adding or removing a document, a travel leg). The classic 0fr to 1fr grid trick: pure CSS, no measuring.
Pill width morph · 300ms
A title pill's label swapping for another: "Poll" ↔ "Add a stay" on Accommodation, "Poll" ↔ "Add places" on Where. The outline eases to the new width instead of snapping.
Press feedback · 100ms
A plain button shrinks as a whole (to 95%). A button with an icon and a label shrinks only its icon (to 88%) and leaves the label still. Round icon buttons and Mini shrink as a whole.
One rule underneath all of it
Section titled “One rule underneath all of it”Colour and border changes (for example, switching theme) always ease over 300ms in the background, automatically, everywhere.
Motion is never the only way information is shown.
Reduce motion
Section titled “Reduce motion”With the phone’s “reduce motion” setting on, nothing in the app moves:
| Stops (happens straight away) | Still fades |
|---|---|
| Fade in, Grow in, height ease, collapse / reveal, the pill width morph, progress bars, every slide (toggles, the segmented toggle, the Dashboard switch, swipe rows, carousels), the press shrink, the footer’s width change and spin, the modals’ fade, the loading shimmer, and the fades on toasts, banners and alert chips | Crossfades between two views (an add form and a list, for example). They don’t move, which reduce-motion guidance allows |