Docs Foundations
Motionstable
Quick, physical, restrained — a stamp pressed, a page turned. Four durations, three easings, GPU-safe properties only. Values live in tokens/motion.tokens.json.
Principles
Motion conveys causality, never decoration
Things move because the user acted: a menu opens from its trigger, a toast enters from its edge, a dragged row lifts. Ambient or looping animation does not exist outside loading states.
Closing is faster than opening
Enter at duration.gentle with easing.enter; exit at duration.fast/base with easing.exit. The user asked for it to go away — get out of the way quickly.
Motion
Three easings against four durations (duration-fast 120ms, duration-base 180ms, duration-gentle 260ms, duration-slow 400ms). Pick the easing by what the element is doing, the duration by how big the move is.
standardcubic-bezier(0.2, 0, 0, 1)— Repositioning within the view: tab underlines, reorder shuffles, layout shifts.entercubic-bezier(0, 0, 0.2, 1)— Elements arriving — menus, popovers, modals, toasts. Decelerates into place.exitcubic-bezier(0.4, 0, 1, 1)— Elements leaving. Accelerates away; always shorter than the matching enter.
Guidelines
- mustAnimate only transform and opacity.
- shouldMicro-interactions (hover, press) use duration.fast; overlays use duration.gentle in, duration.base out.
- mustNothing longer than duration.slow, and duration.slow only for user-initiated page-level moments.