We use motion to enhance interactions, provide feedback, and create a sense of continuity.
The motion of an element should be determined by the context of the motion, the size of the element that is moving, and the distance that the element is travelling.
The three factors mentioned above are combined to create motion tokens. For example,
motionExitLargeShort is the motion token for elements that are exiting the screen, are large in
size, and are moving a short distance.
You can use the grids below to find the right motion token.
enter motion tokens
| Small element E.g. a tooltip, button or popover | Large element E.g. a drawer sliding in from the side of the page | |
|---|---|---|
| Short distance E.g. a switch toggling from on to off | motionEnterSmallShort | motionEnterLargeShort |
| Long distance E.g. a drawer sliding in from the side of the page | motionEnterSmallLong | motionEnterLargeLong |
within motion tokens
| Small element E.g. a tooltip, button or popover | Large element E.g. a drawer sliding in from the side of the page | |
|---|---|---|
| Short distance E.g. a switch toggling from on to off | motionWithinSmallShort | motionWithinLargeShort |
| Long distance E.g. a drawer sliding in from the side of the page | motionWithinSmallLong | motionWithinLargeLong |
exit motion tokens
| Small element E.g. a tooltip, button or popover | Large element E.g. a drawer sliding in from the side of the page | |
|---|---|---|
| Short distance E.g. a switch toggling from on to off | motionExitSmallShort | motionExitLargeShort |
| Long distance E.g. a drawer sliding in from the side of the page | motionExitSmallLong | motionExitLargeLong |
Information:
Hover the examples to see the motion in action.
| Token | Value | Example |
|---|---|---|
motionWithinSmallShortThe easing and duration for motion happening to a small element over a short distance within the screen. | 0.12s ease-in-out | |
motionWithinSmallLongThe easing and duration for motion happening to a small element over a long distance within the screen. | 0.24s ease-in-out | |
motionWithinLargeShortThe easing and duration for motion happening to a large element over a short distance within the screen. | 0.12s ease-in-out | |
motionWithinLargeLongThe easing and duration for motion happening to a large element over a long distance within the screen. | 0.36s ease-in-out | |
motionEnterSmallShortThe easing and duration for motion happening to a small element over a short distance when entering the screen. | 0.24s ease-out | |
motionEnterSmallLongThe easing and duration for motion happening to a small element over a long distance when entering the screen. | 0.36s ease-out | |
motionEnterLargeShortThe easing and duration for motion happening to a large element over a short distance when entering the screen. | 0.36s ease-out | |
motionEnterLargeLongThe easing and duration for motion happening to a large element over a long distance when entering the screen. | 0.48s ease-out | |
motionExitSmallShortThe easing and duration for motion happening to a small element over a short distance when exiting the screen. | 0.12s ease-in | |
motionExitSmallLongThe easing and duration for motion happening to a small element over a long distance when exiting the screen. | 0.24s ease-in | |
motionExitLargeShortThe easing and duration for motion happening to a large element over a short distance when exiting the screen. | 0.24s ease-in | |
motionExitLargeLongThe easing and duration for motion happening to a large element over a long distance when exiting the screen. | 0.36s ease-in |
Duration
Duration tokens define how long an animation or transition takes. Prefer the contextual motion tokens above for product interactions; these lower-level values are included as a reference.
| Token | Value |
|---|---|
fast | 130ms |
smooth | 230ms |
slow | 350ms |
gradual | 530ms |
Transition
Transition tokens combine a duration with an easing curve. Prefer contextual motion tokens when they match the interaction.
| Token | Value |
|---|---|
fastIn | 130ms ease-in |
fastOut | 130ms ease-out |
fastInOut | 130ms ease-in-out |
smoothIn | 230ms ease-in |
smoothOut | 230ms ease-out |
smoothInOut | 230ms ease-in-out |
slowIn | 350ms ease-in |
slowOut | 350ms ease-out |
slowInOut | 350ms ease-in-out |
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page