Carbon components have motion built in for microinteractions. However, the motion design of the overarching UI — that is, how the components interact with each other and enter and exit the page itself — is up to each product team to implement. Use this guidance to customize, combine, coordinate, and choreograph this aspect of motion in the UI.
Carbon recognizes different types of moments in users’ experience and offers two styles of motion—productive motion, and expressive motion. The motion curves are designed to reflect the duality of man and machine.
Productivity and expression are both essential to an interface. Reserve expressive motion for occasional, important moments, to better capture the user’s attention and offer a rhythmic break to the productive experience.
Productive motion creates a sense of efficiency and responsiveness, while remain subtle and out of the way. Productive motion is appropriate for moments when the user needs to focus on completing tasks. Microinteractions in Carbon such as button states, dropdowns, revealing additional information, or rendering data tables and visualizations were all designed with productive motion.
Expressive motion delivers enthusiastic, vibrant, and highly visible movement. Use expressive motion for significant moments such as opening a new page, clicking the primary action button, or when the movement itself conveys a meaning. System alerts and the appearance of notification boxes are great cases for expressive motion.
Strictly linear movement appears unnatural to the human eye. Elements on the screen should 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 purely decorative. IBM motion is essential and efficient, guiding users to value as quickly as possible.
standard-easing when an element is visible from the beginning to the end
of a motion. Expanding tiles and the sorting of table rows are good examples.
|Style||IBM Motion package||CSS||After Effects|
|Productive||cubic-bezier(0.2, 0, 0.38, 0.9)||outgoing 20%, incoming 62%|
|Expressive||cubic-bezier(0.4, 0.14, 0.3, 1)||outgoing 40%, incoming 70%|
With this style, an element quickly appears and slows down to a stop. Use
entrance-ease when adding elements to the view, such as a modal or toaster
appearing. Elements moving in response to the user’s input, such as a dropdown
opening or toggle switching should also use this style.
|Style||IBM Motion package||CSS||After Effects|
|Productive||cubic-bezier(0, 0, 0.38, 0.9)||outgoing 0%, incoming 62%|
|Expressive||cubic-bezier(0, 0, 0.3, 1)||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.
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 leaves the view, but slows down as it exits, implying that it would come to rest just outside the view, and ready to be recalled.
|Style||IBM motion package||CSS||After Effects|
|Productive||cubic-bezier(0.2, 0, 1, 0.9)||outgoing 20%, incoming 0%|
|Expressive||cubic-bezier(0.4, 0.14, 1, 1)||outgoing 40%, incoming 0%|
The IBM motion package has the easing curves stored for fast access. This is the recommended method to call an easing curve and stay connected to receive any future updates.
If you are unable to use the above method, cubic-bezier curve notation is the standard way to express easing curves.
|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 your element. Carbon uses a non-linear duration scale to achieve better perceived consistency across all distances.
Dynamic duration is an upcoming built-in feature for Carbon components and a part of the motion package. Currently, there are six static value tokens for easier implementation.
|Micro-interactions such as button and toggle||70ms|
|Micro-interactions such as fade||110ms|
|Micro-interactions, small expansion, short distance movements||150ms|
|Expansion, system communication, toast||240ms|
|Large expansion, important system notifications||400ms|