Motion

Motion is a powerful tool in designing and building communication and user experience. It can bring your work to life, guide users through complex experiences, and help move forward—from here to there, now to next, start to finish—and make progress.

Style

IBM Design System recognizes different moments in user’s experience, and offers two styles of motion—productive motion, and expressive motion. The motion curves are designed to reflect the philosophical duality of Man and Machine.

motion style curves

Productive

Productive motion creates a sense of efficiency and responsiveness, while being subtle. Use Productive motion for moments when user needs to focus on tasks—micro-interactions such as button interaction and dropdown menus, revealing additional information upon user’s request, or rendering data tables and visualizations.

Expressive

Expressive motion delivers enthusiastic and vibrant, thus more visible movement. Use expressive motion for significant moments such as user opening a new page or clicking the primary action button, or when the movement itself conveys a meaning or needs to be noticed by the user such as system alert or notification box appearing.

Productivity and Expression are both essential to an interface. Reserve Expressive motion for occasional, important moments to better capture user’s attention, and offer rhythmic break to the productive experience.

Our components have basic motion build in. Use this guidance to customize motion, combine and coordinate motion through out experiences.

Play

Reserve Expressive motion (magenta) for key moments in user’s experience.

Easing

Strictly linear movement appears unnatural to the human eye. Elements on the screen speed up quickly and slow down smoothly, obeying the physics of a light-weight material. “Easing curves” describe the precise amount of accelerations in motion. We commonly use one of these three types of easing.

Play

Elements on the screen speed up quickly and slow down smoothly, obeying the physics of a light-weight material

Avoid easing curves that are unnatural, distracting, or decorative should be avoided. IBM motion is essential and efficient. We guide the users to value as quickly as possible.

Play

Easing curves that suggest bounce, stretch, or sudden stops are not recommended

Standard-easing

Use standard-easing when an element is visible from the beginning to end of a motion. Tiles expanding and table rows sorting are good examples.

Play
ContextProductiveExpressive
CSScubic-bezier(0.2, 0, 0.38, 0.9)cubic-bezier(0.4, 0.14, 0.3, 1)
After EffectsOutgoing 20%, incoming 62%Outgoing 40%, incoming 70%

Entrance-easing

Use entrance-easing when adding elements to the view such as a modal or toaster appearing, or moving in response to users’ input, such as dropdown opening or toggle. An element quickly appears and slows down to a stop.

Play
ContextProductiveExpressive
CSScubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.3, 1)
After EffectsOutgoing 0%, incoming 62%Outgoing 0%, incoming 70%

Exit-easing

Use exit-easing when removing elements from view, such as closing a modal or toaster. The element speeds up as it exits from view, implying that its departure from the screen is permanent.

Play
ContextProductiveExpressive
CSScubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.4, 0.14, 1, 1)
After EffectsOutgoing 20%, incoming 0%Outgoing 40%, incoming 0%

An exception to exits: if an element leaves the view but stays nearby, ready to reappear upon user action, use Standard easing instead. A good example of this is a side panel. The panel would leave the view, but slows down as it exits, implying that it would come to rest just outside the view, and ready to be recalled.

Easing curve summary

Cubic-bezier curve notation is the standard way to express easing curves. The IBM Motion Package has the easing curves stored as tokens for fast access.

ContextProductiveExpressive
Standard easingcubic-bezier(0.2, 0, 0.38, 0.9)cubic-bezier(0.4, 0.14, 0.3, 1)
Entrance easingcubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.3, 1)
Exit easingcubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.4, 0.14, 1, 1)

Duration

Duration is calculated based on the style and size of the motion. Among the two motion styles, Productive motion is significantly faster than Expressive motion. Motion’s duration should be dynamic based on the size of the animation - the larger the change in distance (traveled) or size (scaling) of the element, the longer the animation takes.

Play

Duration contrast between a taller and a shorter component.

When custom duration is possible, please use the Motion Generator to get the customized duration calculated for you element. We uses a non-linear duration scale to achieve better perceived consistency across all distances.

Dynamic duration

We are working on making dynamic duration a built-in feature for all Carbon components. Currently, we offer two static values as tokens for easier implementation.

ContextProductiveExpressive
Productive$transition—base100ms
Expressive$transition—expansion150ms