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.
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.
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, 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.
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.
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.
standard-easing when an element is visible from the beginning to end of a motion. Tiles expanding and table rows sorting are good examples.
|CSS||cubic-bezier(0.2, 0, 0.38, 0.9)||cubic-bezier(0.4, 0.14, 0.3, 1)|
|After Effects||Outgoing 20%, incoming 62%||Outgoing 40%, incoming 70%|
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.
|CSS||cubic-bezier(0, 0, 0.38, 0.9)||cubic-bezier(0, 0, 0.3, 1)|
|After Effects||Outgoing 0%, incoming 62%||Outgoing 0%, incoming 70%|
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.
|CSS||cubic-bezier(0.2, 0, 1, 0.9)||cubic-bezier(0.4, 0.14, 1, 1)|
|After Effects||Outgoing 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.
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.
|Standard easing||cubic-bezier(0.2, 0, 0.38, 0.9)||cubic-bezier(0.4, 0.14, 0.3, 1)|
|Entrance easing||cubic-bezier(0, 0, 0.38, 0.9)||cubic-bezier(0, 0, 0.3, 1)|
|Exit easing||cubic-bezier(0.2, 0, 1, 0.9)||cubic-bezier(0.4, 0.14, 1, 1)|
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.
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.
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.