# Motion

We use motion to enhance interactions, provide feedback, and create a sense of continuity.

Tabs: [Overview](/design-tokens/motion/motion.overview.md) · [About](/design-tokens/motion/motion.about.md) · [Design](/design-tokens/motion/motion.design.md) · [Accessibility](/design-tokens/motion/motion.accessibility.md) · [Resources](/design-tokens/motion/motion.resources.md)

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`                                            |

> Hover the examples to see the motion in action.

| Token                                                                                                                                   | Value             | Example |
| --------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------- |
| `motionWithinSmallShort` The easing and duration for motion happening to a small element over a short distance within the screen.       | 0.12s ease-in-out |         |
| `motionWithinSmallLong` The easing and duration for motion happening to a small element over a long distance within the screen.         | 0.24s ease-in-out |         |
| `motionWithinLargeShort` The easing and duration for motion happening to a large element over a short distance within the screen.       | 0.12s ease-in-out |         |
| `motionWithinLargeLong` The easing and duration for motion happening to a large element over a long distance within the screen.         | 0.36s ease-in-out |         |
| `motionEnterSmallShort` The easing and duration for motion happening to a small element over a short distance when entering the screen. | 0.24s ease-out    |         |
| `motionEnterSmallLong` The easing and duration for motion happening to a small element over a long distance when entering the screen.   | 0.36s ease-out    |         |
| `motionEnterLargeShort` The easing and duration for motion happening to a large element over a short distance when entering the screen. | 0.36s ease-out    |         |
| `motionEnterLargeLong` The easing and duration for motion happening to a large element over a long distance when entering the screen.   | 0.48s ease-out    |         |
| `motionExitSmallShort` The easing and duration for motion happening to a small element over a short distance when exiting the screen.   | 0.12s ease-in     |         |
| `motionExitSmallLong` The easing and duration for motion happening to a small element over a long distance when exiting the screen.     | 0.24s ease-in     |         |
| `motionExitLargeShort` The easing and duration for motion happening to a large element over a short distance when exiting the screen.   | 0.24s ease-in     |         |
| `motionExitLargeLong` The 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 |