Motion UI

IBM Design System recognizes different moments in user 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.

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 motion delivers enthusiastic and vibrant movement, and is thus more visible. Use expressive motion for significant moments such as a user opening a new page, or clicking the primary action button, or when the movement itself conveys a meaning that 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 a user’s attention, and offer a rhythmic break to the productive experience.

Our components have basic motion built in. Use this guidance to customize, combine and coordinate motion throughout user experiences.

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 lightweight material. “Easing curves” describe the precise amount of accelerations in motion. We commonly use one of these three types of easing.

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

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.

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

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.

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 be ready to be recalled.

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.

Duration is calculated based on the style and size of the motion. Add Between 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.

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

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.