IDS motion tokens define and maintain consistent transitions and animations across all products. These tokens are optimized to provide variation in visual expression and allow teams to incorporate motion into their products effortlessly.
For an interactive view of these tokens, visit the IDS Tokens Storybook
Token |
Primitive token |
Usage |
|---|---|---|
ease.fade |
ease.smooth.10 |
Applies to color and opacity transitions, such as fading between two colors, or an element fading in and out of view. This style of ease has a slow start, moderate middle, and slow end, creating a subtle transition. |
ease.transform |
ease.smooth.20 |
Applies to elements that are continuously visible throughout the animation, beginning and ending within view. This style of ease has a slow start, quick middle, and slow end, creating a fast animation with smooth transitions. |
ease.appear |
ease.decelerate.10 |
Applies to elements that move into view. This style of ease has a fast start and slow end, creating an animation that decelerates into view. |
ease.disappear |
ease.accelerate.10 |
Applies to elements that move out of view. This style of ease has a slow start and fast end, creating an animation that accelerates out of view. |
ease.transform.emphasize |
ease.decelerate.elastic.10 |
Similar to Transform, with an added subtle overshoot bounce. This ease applies to elements that are continuously visible throughout the animation, beginning and ending within view, with a smaller mass traversing a small area of the screen. This style of ease has a quick start, overshoots the target value and slowly pulls back at the end, creating a fast animation with added emphasis. |
ease.appear.emphasize |
ease.decelerate.elastic.20 |
Similar to Appear, with an added subtle overshoot. This style of ease starts quick, overshoots the target value and slowly pulls back at the end. Creating a fast animation that decelerates into view with added emphasis. |
ease.disappear.emphasize |
ease.accelerate.elastic.10 |
Similar to Disappear, with an added subtle anticipation. This style of ease starts by slowly moving in the opposite direction of the target value and then ends quickly. Creating a fast animation with added emphasis before accelerating out of view. |
Token |
Primitive token |
Usage |
|---|---|---|
duration.fade.fast |
duration.150 |
Use with ease.fade |
duration.fade.moderate |
duration.200 |
Use with ease.fade |
duration.fade.slow |
duration.250 |
Use with ease.fade |
duration.transform.fast |
duration.350 |
Use with ease.transform |
duration.transform.moderate |
duration.400 |
Use with ease.transform |
duration.transform.slow |
duration.450 |
Use with ease.transform |
duration.appear.fast |
duration.250 |
Use with ease.appear |
duration.appear.moderate |
duration.300 |
Use with ease.appear |
duration.appear.slow |
duration.350 |
Use with ease.appear |
duration.disappear.fast |
duration.200 |
Use with ease.disappear |
duration.disappear.moderate |
duration.250 |
Use with ease.disappear |
duration.disappear.slow |
duration.300 |
Use with ease.disappear |
duration.transform.emphasize.fast |
duration.500 |
Use with ease.transform.emphasize |
duration.transform.emphasize.moderate |
duration.700 |
Use with ease.transform.emphasize |
duration.transform.emphasize.slow |
duration.800 |
Use with ease.transform.emphasize |
duration.appear.emphasize.fast |
duration.500 |
Use with ease.appear.emphasize |
duration.appear.emphasize.moderate |
duration.700 |
Use with ease.appear.emphasize |
duration.appear.emphasize.slow |
duration.800 |
Use with ease.appear.emphasize |
duration.disappear.emphasize.fast |
duration.500 |
Use with ease.disappear.emphasize |
duration.disappear.emphasize.moderate |
duration.700 |
Use with ease.disappear.emphasize |
duration.disappear.emphasize.slow |
duration.800 |
Use with ease.disappear.emphasize |