Foundation

Motion

Duration and easing tokens, and when things move

Overview

Motion tells people what changed: a menu opened, a dialog closed, a switch turned on. It should never make them wait. Each token is named for what moves, not for a number.

Duration

5 tokens

Token	Value

Token	Used for
`fast`	Color changes (hover, pressed, selected, borders), menu close
`base`	Menu open, switch thumb, sort arrow, dialog and toast close
`moderate`	Dialog and toast open, backdrop, side panel close
`slow`	Side panel (Overlay) open
`loop`	One round of a repeating loading pulse (Skeleton)

loop is for motion that repeats until loading ends. It is not part of the enter and leave steps.

Leaving is one step shorter than entering. A menu opens in base and closes in fast. A dialog opens in moderate and closes in base.

Easing

3 tokens

Token	Value

standard — changes in place (colors, switch thumb, arrows)
enter — things coming in: fast start, gentle stop
exit — things leaving: gentle start, fast finish

Usage

import { tokens } from '@illog/themes'
 
export const hoverDuration = tokens.motion.duration.fast
export const standardEasing = tokens.motion.easing.standard

In plain CSS, use the variables from themes.css:

.card {
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
}

Rules

Name the properties that change. Never use transition: all — it animates focus rings and size changes too.
Focus rings do not animate. They appear the moment focus moves.
Items inside an open menu change color instantly, so arrow-key browsing never lags.
When the operating system asks for reduced motion, movement and scaling are turned off and only fades remain.