Skip to content
Triargos Design

Motion

Motion says what changed and where it went. It is short, it starts fast, and frequent actions barely move. Durations and curves are roles, named by what moves.

Durations

Larger and rarer moves take longer.

duration-enter100ms · Popups and menus: enter and exit
Popover, Select, Combobox, menus
duration-feedback150ms · Hover, press, colour on controls and rows
TabsTrigger, Item
duration-move200ms · Something that travels on screen
Tabs indicator, Sheet, Switch thumb
duration-modal250ms · Dialogs and their backdrop: enter and exit. Larger than a popup, so slower
Dialog, AlertDialog, Sheet

Easing

Never linear for UI, never ease-in. Hover and colour use the default ease.

ease-entercubic-bezier(0.23, 1, 0.32, 1)

Enter and exit. Fast start: the response is immediate, the end settles.

ease-movecubic-bezier(0.645, 0.045, 0.355, 1)

Moving what is already on screen: accelerate, then brake.

Rules

Enter and exitfade + zoom from 95%

Popups and dialogs fade and scale from 95%, from their trigger (origin-(--transform-origin)). Never from 0.

SpringscardRevealTransition

Motion that can be interrupted (a footer that shows and hides while typing, a dialog acknowledging) is a spring in code, so it keeps its speed when it turns around.

Arriving contentanimate-in fade-in-0 duration-feedback

Content that arrives after a load fades in once, opacity only. A confirmation check pops in and draws its stroke (Checkbox, Copy Button).

Reduced motionmotion-reduce:

Movement stops; fades may stay. CSS: motion-reduce:transition-none. Code: useReducedMotion().

Frequent actionsMenus, shortcuts, selection

What people do many times a day only fades. Nothing travels, nothing bounces.