# Motion

Motion shows what changed and where it went, in 100 to 300 ms on two curves, and movement stops for readers who ask for less motion.

* Kind: foundation
* Page: https://design.werklist.com/foundations/motion
* Version: 2.1.2

## Rules

* Animate a change the reader could otherwise miss: a menu opening, a row arriving in a list, a panel sliding in. No motion that only decorates.
* Nothing moves on the first paint. Motion starts when the reader acts or new content arrives.
* Hover and focus change fill and ink. A card lifts 1 px at most.
* No single movement lasts longer than 300 ms. A staggered list takes longer as a whole, and a loop that shows work in progress keeps running.
* Entrances use the soft curve. Movement within the screen and exits use the standard curve, one duration step shorter than the entrance.
* A menu enters in 200 ms and leaves in 150 ms.
* Linear timing only for rotation, as in the loading icon. No bounce and no overshoot.
* Where a gesture drives the motion, WerkOS uses springs. Each settles within 250 ms with no visible overshoot.
* Where a spring cannot be used, take the nearest duration on the soft curve.
* Menus, popovers and dialogs fade in and rise 8 px. They fade out in place.
* Rows arriving after the page has loaded enter one after another. Rows after the sixth arrive with it, so a long list does not trickle in.
* Animate opacity and position. A size animates only when a section opens or closes in place. No width that animates in a line of text.

## Anatomy

* Instant duration: the pressed state, a tooltip leaving: 100 ms (--duration-instant)
* Fast duration: hover, focus, fill and color changes: 150 ms (--duration-fast)
* Base duration: menus, popovers, a new page, a card lifting: 200 ms (--duration-base)
* Slow duration: dialogs, sheets, the header condensing, a section opening: 300 ms (--duration-slow)
* Standard curve: movement within the screen, exits: cubic-bezier(0.4, 0, 0.2, 1) (--ease-standard)
* Soft curve: entrances: cubic-bezier(0, 0, 0.2, 1) (--ease-soft)
* Rise of a menu, a dialog or a new row: 8 px
* Stagger: 40 ms pause, 45 ms between rows, 280 ms per row
* Page change: fades in and slides 20 px in 200 ms
* Spring, the current item sliding in navigation: stiffness 700, damping 38, mass 0.5
* Spring, a tap on a navigation item: stiffness 560, damping 32, mass 0.6
* Spring, a value changing in place: stiffness 480, damping 38, mass 0.9

## States

* Reduced motion: only the loading icon keeps moving. Springs jump to their end, no stagger or page slide. Fades and color changes stay at 150 ms. (--duration-fast)
* Theme change: instant

## Accessibility

* Under reduced motion, only the loading icon keeps moving and fades stay. The WerkAI caret stops blinking.
* Motion is not the only signal. A saved change also says Saved, and new content is announced to screen readers.

## Tokens

* --duration-instant
* --duration-fast
* --duration-base
* --duration-slow
* --ease-standard
* --ease-soft