Version 5.0.0

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.

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.

Key example of a Spectrum ease-out curve. A circle moves at the speed of the easing curve on the X axis.

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)

Key example of a Spectrum ease-in curve. A circle moves at the speed of the easing curve on the X axis.

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)

Key example of a Spectrum ease-in-out curve. A circle moves at the speed of the easing curve on the X axis.

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#

TokenDuration Time (Milliseconds)Duration Type
duration-100130 msMicro
duration-200160 msMicro
duration-300190 msMicro
duration-400220 msMicro
duration-500250 msMacro
duration-600300 msMacro
duration-700350 msMacro
duration-800400 msMacro
duration-900450 msMacro
duration-1000500 msMacro

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.

Fade in#

Slide fade#

Slide#

Fill#

Color#

Expand down#

Scale#

Scale fade#

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#


DateNumberNotes
Apr 19, 20195.0.0
  • This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)