Spectrum
Motion
Motion brings meaning and a sense of life to the experience. It should be purposeful, intuitive, and seamless. It should help users be more productive and never slow them down.
Table of contents#
Principles#
Purposeful#
Spectrum’s motion is used with intention. All animations help users reach their goals by surfacing connections between states or views, drawing attention to important details, or providing feedback.
Intuitive#
Spectrum’s motion feels familiar and expected. It mirrors traits from the real world like acceleration, gravity, and volume to achieve a natural feel.
Seamless#
Spectrum’s motion fits naturally into the experience without creating distraction. The amount of motion used should be just enough to get the intention across and no more.
Easing#
Easing defines how an animation changes speed over the course of the action. In the real world, objects tend to accelerate and decelerate as they move. Spectrum uses three different types of easing.
Spectrum ease-out#
Spectrum ease-out animations work best for fading and animating objects into view. This is the most common easing used in Spectrum.
cubic-bezier(0, 0, 0.40, 1)
Spectrum ease-in#
Spectrum ease-in animations are best suited for objects exiting the screen or fading out of view.
cubic-bezier(0.50, 0, 1, 1)
Spectrum ease-in-out#
Spectrum ease-in-out is best for depicting movement from place to place on screen. This type of easing draws attention and should be used for bigger movements.
cubic-bezier(0.45, 0, 0.40, 1)
Duration#
Be mindful when choosing the right duration. Durations should take into account the complexity of the element you are animating, the easing, and the scale of the motion.
Micro animations#
Micro animations cover a small amount of ground. Examples are color fades, hovers, accordions, tooltips, etc.
Macro animations#
Macro animations cover larger amounts of visual ground. This includes large panel or drawer reveals, movement across the screen, etc.
Duration tokens#
| Token | Duration time (milliseconds) | Duration type |
|---|---|---|
| duration-100 | 130 ms | Micro |
| duration-200 | 160 ms | Micro |
| duration-300 | 190 ms | Micro |
| duration-400 | 220 ms | Micro |
| duration-500 | 250 ms | Macro |
| duration-600 | 300 ms | Macro |
| duration-700 | 350 ms | Macro |
| duration-800 | 400 ms | Macro |
| duration-900 | 450 ms | Macro |
| duration-1000 | 500 ms | Macro |
Effect examples#
Spectrum uses a combination of easing and duration to create animation effects. Here are a few examples of how these guidelines can be combined. Click on the squares to view the effects.
Native platforms#
Spectrum’s easing curves and durations are usable across most platforms. In some rare cases, you may not have the ability to modify the animation (e.g., skinned native controls). Don’t build custom components just to follow our animation guidelines, since native components allow us to leverage built-in accessibility features.
Changelog#
| Date | Number | Notes |
|---|---|---|
| Apr 20, 2019 | 5.0.0 |
|
Object styles