Motion

Motion shows what changed and where it went. Most of it lasts 150 to 300 milliseconds, and movement stops for readers who ask for less motion.

What motion is for

Animate a change the reader could otherwise miss: a menu opening from its button, a row arriving in a list, a panel sliding in from the edge it belongs to. Leave out motion that only decorates.

Keep frequent actions nearly still. A movement seen all day turns into a wait, so hover and focus change fill and ink, and a card lifts 1 px at most.

Nothing moves on the first paint. A page arrives complete, and motion starts when the reader acts or new content arrives.

Durations

Choose the duration by the size of the change. Small controls answer at once. Larger surfaces take longer, since they travel further.

No single movement lasts longer than 300 ms. A list whose rows arrive one after another takes longer as a whole, and a loop that shows work in progress keeps running.

--duration-instant100 ms
--duration-fast150 ms
--duration-base200 ms
--duration-slow300 ms

Instant: the pressed state, a tooltip leaving: 100 ms; --duration-instant
Fast: hover, focus, fill and color changes: 150 ms; --duration-fast
Base: menus, popovers, a new page, a card lifting: 200 ms; --duration-base
Slow: dialogs, sheets, the header condensing, a section opening: 300 ms; --duration-slow

Easing

Use the soft curve for anything entering the screen: it starts fast and settles gently. Use the standard curve for movement within the screen and for anything leaving it, one duration step shorter than its entrance. A menu enters in 200 ms and leaves in 150.

Keep linear timing for rotation, as in the loading icon. Do not use a curve that overshoots its end.

Standard--ease-standard

Soft--ease-soft

Standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-standard
Soft, for entrances: cubic-bezier(0, 0, 0.2, 1); --ease-soft
Linear: the rotation of the loading icon

Springs in WerkOS

Where a gesture drives the motion, WerkOS uses springs. Each one settles within a quarter of a second, with no visible overshoot. Where a spring cannot be used, take the nearest duration on the soft curve.

The current item sliding in navigation: 700, 38, 0.5
A tap on a navigation item: 560, 32, 0.6
A value changing in place: 480, 38, 0.9

Stiffness, damping and mass.

What moves, and how

Menus, popovers and dialogs fade in and rise 8 px from where they open. They fade out in place.

A card rises 1 px on hover. A new page fades in and slides 20 px in 200 ms.

When rows arrive in a list after the page has loaded, they enter one after another, 45 ms apart after a 40 ms pause, each fading in and rising 8 px over 280 ms. 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. Switching between the light and dark theme is instant.

Rise of a menu, a dialog or a new row: 8 px
Slide of a new page: 20 px in 200 ms
Pause, then step between rows: 40 ms, then 45 ms

Less motion

When the reader’s system asks for reduced motion, only the loading icon keeps moving, since it is small and is the only sign of work in progress. Springs jump to their end, and the stagger and the page slide disappear. The WerkAI caret stops blinking.

Fades and color changes stay at 150 ms, so a menu still shows that it opened.

Motion is not the only signal. A saved change also says Saved, and new content is announced to screen readers.

Reduce motion

With motion

Reduced motion

Movement: stops, except the loading icon
Fades and color changes: 150 ms; --duration-fast
Blinking caret: stops

Permitted and not permitted

Permitted

A menu that fades in and rises 8 px
It shows where it came from and is done in 200 ms.
A stagger on rows that arrive after the page
The eye follows where the new content lands.
A fade kept under reduced motion
The reader still sees that something opened.

Not permitted

A bounce or an overshoot
It delays the end state and pulls the eye for no reason.
A width that animates in a line of text
The whole line reflows while it moves.
Content that animates in on first load
The reader waits for a page that was already there.
A single movement longer than 300 ms
Past that the interface feels slow.

NextAccessibility

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

JSON

{
  "title": "Motion",
  "path": "/foundations/motion",
  "url": "https://design.werklist.com/foundations/motion",
  "text": "https://design.werklist.com/agent/foundations/motion",
  "summary": "How long things move, on which curve, and what stops when a reader asks for less motion.",
  "version": "2.1.2",
  "kind": "foundation",
  "name": "Motion",
  "purpose": "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.",
  "anatomy": [
    {
      "part": "Instant duration: the pressed state, a tooltip leaving",
      "measure": "100 ms",
      "token": "--duration-instant"
    },
    {
      "part": "Fast duration: hover, focus, fill and color changes",
      "measure": "150 ms",
      "token": "--duration-fast"
    },
    {
      "part": "Base duration: menus, popovers, a new page, a card lifting",
      "measure": "200 ms",
      "token": "--duration-base"
    },
    {
      "part": "Slow duration: dialogs, sheets, the header condensing, a section opening",
      "measure": "300 ms",
      "token": "--duration-slow"
    },
    {
      "part": "Standard curve: movement within the screen, exits",
      "measure": "cubic-bezier(0.4, 0, 0.2, 1)",
      "token": "--ease-standard"
    },
    {
      "part": "Soft curve: entrances",
      "measure": "cubic-bezier(0, 0, 0.2, 1)",
      "token": "--ease-soft"
    },
    {
      "part": "Rise of a menu, a dialog or a new row",
      "measure": "8 px"
    },
    {
      "part": "Stagger",
      "measure": "40 ms pause, 45 ms between rows, 280 ms per row"
    },
    {
      "part": "Page change",
      "measure": "fades in and slides 20 px in 200 ms"
    },
    {
      "part": "Spring, the current item sliding in navigation",
      "measure": "stiffness 700, damping 38, mass 0.5"
    },
    {
      "part": "Spring, a tap on a navigation item",
      "measure": "stiffness 560, damping 32, mass 0.6"
    },
    {
      "part": "Spring, a value changing in place",
      "measure": "stiffness 480, damping 38, mass 0.9"
    }
  ],
  "states": [
    {
      "name": "Reduced motion",
      "change": "only the loading icon keeps moving. Springs jump to their end, no stagger or page slide. Fades and color changes stay at 150 ms.",
      "tokens": [
        "--duration-fast"
      ]
    },
    {
      "name": "Theme change",
      "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"
  ],
  "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."
  ]
}

Raw file: https://design.werklist.com/agent/foundations/motion