Motion tokens
Durations by role, the duration scale, easing curves by role, where a surface appears from, and springs.
Motion tokens under tanrei.sys.motion. For guidance, read Motion.
How long a change takes, by what moves: a change of state, a selection, a box that resizes, content that opens in place, and each kind of surface that appears and leaves. A component’s duration token aliases its role, so a layer re-times every component of one role in one line. A surface leaves faster than it appears. The roles follow the motion dial.
| Token | Value | Preview |
|---|---|---|
--tanrei-sys-motion-role-appear-anchored-enter | 300ms | |
--tanrei-sys-motion-role-appear-anchored-exit | 250ms | |
--tanrei-sys-motion-role-appear-hint-enter | 250ms | |
--tanrei-sys-motion-role-appear-hint-exit | 200ms | |
--tanrei-sys-motion-role-appear-modal-enter | 350ms | |
--tanrei-sys-motion-role-appear-modal-exit | 300ms | |
--tanrei-sys-motion-role-appear-sheet-enter | 400ms | |
--tanrei-sys-motion-role-appear-sheet-exit | 350ms | |
--tanrei-sys-motion-role-appear-toast-enter | 350ms | |
--tanrei-sys-motion-role-appear-toast-exit | 300ms | |
--tanrei-sys-motion-role-disclosure | 400ms | |
--tanrei-sys-motion-role-feedback | 450ms | |
--tanrei-sys-motion-role-reduced | 100ms | |
--tanrei-sys-motion-role-resize-default | 300ms | |
--tanrei-sys-motion-role-resize-large | 400ms | |
--tanrei-sys-motion-role-selection-mark | 250ms | |
--tanrei-sys-motion-role-selection-travel | 250ms | |
--tanrei-sys-motion-role-show-delay | 300ms | |
--tanrei-sys-motion-role-state-compact | 200ms | |
--tanrei-sys-motion-role-state-default | 250ms | |
--tanrei-sys-motion-role-state-large | 250ms |
Generated from design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
The scale the roles are made of.
| Token | Value | Preview |
|---|---|---|
--tanrei-sys-motion-duration-short1 | 50ms | |
--tanrei-sys-motion-duration-press-hold | 100ms | |
--tanrei-sys-motion-duration-short2 | 100ms | |
--tanrei-sys-motion-duration-stagger | 100ms | |
--tanrei-sys-motion-duration-short3 | 150ms | |
--tanrei-sys-motion-duration-short4 | 200ms | |
--tanrei-sys-motion-duration-medium1 | 250ms | |
--tanrei-sys-motion-duration-medium2 | 300ms | |
--tanrei-sys-motion-duration-medium3 | 350ms | |
--tanrei-sys-motion-duration-medium4 | 400ms | |
--tanrei-sys-motion-duration-long1 | 450ms | |
--tanrei-sys-motion-duration-long2 | 500ms | |
--tanrei-sys-motion-duration-long3 | 550ms | |
--tanrei-sys-motion-duration-long4 | 600ms | |
--tanrei-sys-motion-duration-extra-long1 | 700ms | |
--tanrei-sys-motion-duration-extra-long2 | 800ms | |
--tanrei-sys-motion-duration-extra-long3 | 900ms | |
--tanrei-sys-motion-duration-extra-long4 | 1000ms |
Generated from design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
The curves, and the four roles a component eases a change by: enter for a surface that appears, exit for one that leaves, state for a change of state in place, spatial for something that moves or resizes in place. Each role names a curve of the scale.
| Token | Value | Curve |
|---|---|---|
--tanrei-sys-motion-easing-emphasized-accelerate | cubic-bezier(0.3, 0, 0.8, 0.15) | |
--tanrei-sys-motion-easing-emphasized-decelerate | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--tanrei-sys-motion-easing-enter | cubic-bezier(0.2, 0, 0, 1) | |
--tanrei-sys-motion-easing-exit | cubic-bezier(0.3, 0, 1, 1) | |
--tanrei-sys-motion-easing-linear | cubic-bezier(0, 0, 1, 1) | |
--tanrei-sys-motion-easing-spatial | cubic-bezier(0.2, 0, 0, 1) | |
--tanrei-sys-motion-easing-standard | cubic-bezier(0.2, 0, 0, 1) | |
--tanrei-sys-motion-easing-standard-accelerate | cubic-bezier(0.3, 0, 1, 1) | |
--tanrei-sys-motion-easing-standard-decelerate | cubic-bezier(0, 0, 0, 1) | |
--tanrei-sys-motion-easing-state | cubic-bezier(0.2, 0, 0, 1) |
Generated from design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
Every surface that appears — a menu, a list, a popover, a tooltip, a dialog, a snackbar — starts from the same opacity, scale, distance and blur, and leaves the same way back. One choice of kind sets them together; a layer chooses another, or pins one of the values.
tanrei.sys.behavior.appearance
How a surface appears and leaves: a menu, a select's or a combobox's list, a popover, a tooltip, a dialog, a snackbar. fade-scale: it fades in and grows from 0.96 of its size toward its origin. fade: it only fades in. fade-slide: it fades in and travels a short way into place (sys.space.space100). blur-slide: it fades in, travels the same way and comes into focus from a 4 px blur. unfold: it fades in and unfolds from its anchored edge, scaled from 0 along the axis that leaves the anchor. The choice sets sys.motion.appear.*; a layer that pins one of those keeps it whatever the choice. A surface that leaves runs its appearance back. A sheet slides in from its edge under every choice.
Generated from tokens/sys/behavior.tokens.json
| Token | Value |
|---|---|
--tanrei-sys-motion-appear-blur | 0px |
--tanrei-sys-motion-appear-distance | 0px |
--tanrei-sys-motion-appear-opacity | 0 |
--tanrei-sys-motion-appear-origin | anchor |
--tanrei-sys-motion-appear-scale | 0.96 |
Generated from design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
Each spring has four sub-tokens. stiffness and damping drive platforms with spring animation; duration and easing are the approximation used where springs are unavailable, such as CSS.
| Token | stiffness | damping | duration | easing | Curve |
|---|---|---|---|---|---|
tanrei.sys.motion.spring.expressive.default-effects | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) | |
tanrei.sys.motion.spring.expressive.default-spatial | 380 | 0.8 | 500ms | cubic-bezier(0.38, 1.21, 0.22, 1) | |
tanrei.sys.motion.spring.expressive.fast-effects | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) | |
tanrei.sys.motion.spring.expressive.fast-spatial | 800 | 0.6 | 350ms | cubic-bezier(0.42, 1.67, 0.21, 0.9) | |
tanrei.sys.motion.spring.expressive.slow-effects | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) | |
tanrei.sys.motion.spring.expressive.slow-spatial | 200 | 0.8 | 650ms | cubic-bezier(0.39, 1.29, 0.35, 0.98) | |
tanrei.sys.motion.spring.standard.default-effects | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) | |
tanrei.sys.motion.spring.standard.default-spatial | 700 | 0.9 | 500ms | cubic-bezier(0.27, 1.06, 0.18, 1) | |
tanrei.sys.motion.spring.standard.fast-effects | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) | |
tanrei.sys.motion.spring.standard.fast-spatial | 1400 | 0.9 | 350ms | cubic-bezier(0.27, 1.06, 0.18, 1) | |
tanrei.sys.motion.spring.standard.slow-effects | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) | |
tanrei.sys.motion.spring.standard.slow-spatial | 300 | 0.9 | 750ms | cubic-bezier(0.27, 1.06, 0.18, 1) |
Generated from design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json