Motion

transition.movement.disclosure

--semantic-transition-movement-disclosure

Use when content expands or collapses, for chevrons that turn with it, and for menu panels that slide in and out.

transition.movement.drawer

--semantic-transition-movement-drawer

Component token for a drawer opening and closing, and snapping back after a swipe. Fade its backdrop with transition.fade.

transition.movement.indicator

--semantic-transition-movement-indicator

Use when a selection indicator answering a click moves to a new position or size, such as a tab indicator or a switch thumb.

transition.movement.navigationMenu

--semantic-transition-movement-navigation-menu

Component token for the navigation menu popup moving and resizing between triggers, and for its entry scale.

transition.movement.popup

--semantic-transition-movement-popup

Use for the scale or slide of popups as they open and close, such as dropdowns, menus, popovers, tooltips, and modals. Fade their opacity with transition.fade.

transition.movement.tableOfContents.indicator

--semantic-transition-movement-table-of-contents-indicator

Component token for the table of contents indicator following the reading position. Overshoots slightly before it settles.

transition.fade

--semantic-transition-fade

Use for opacity when something appears or disappears, such as popups, scrollbars, backdrops, and page crossfades.

transition.feedback

--semantic-transition-feedback

Use for color, background, border, and shadow changes, such as hover, press, and the switch track.

transition.pulse

--semantic-transition-pulse

Use for one half of a repeating opacity pulse that shows content is loading, such as a skeleton, between opacity.visible and opacity.pulse. Do not use for elements appearing or disappearing; use fade.

transition.stale

--semantic-transition-stale

Use to dim content to opacity.stale; the delay keeps fast updates from flickering. Apply it only in the stale state, so content restores instantly.

dimension.travel.rest

--semantic-dimension-travel-rest

Use for content at its resting position.

dimension.travel.keyboardKey

--semantic-dimension-travel-keyboard-key

Use for the distance a keyboard key moves down while pressed, as deep as its bottom edge is thicker than its other borders.

dimension.travel.popup

--semantic-dimension-travel-popup

Use for the distance popups slide as they open and close.

duration.confirmation

--semantic-duration-confirmation

Use for how long a confirmation stays, such as a copy button's check after copying, before the control returns to its resting state.