Animation

Animation helps communicate meaning and utility in ways which delight and inform our users.

Principles

Focus Attention

Use concise and engaging ways to direct users to the things they need without distracting or disorienting them. Guide their attention to help them complete their tasks.

When a user enters a new experience, use animation to highlight the UI element that begins the flow.

Example of an bouncing tooltip used to focus a user's attention on a button.

Orient the User

Convey the relationships between elements. Educate users, showing them where they are, what they can do, and what will happen as a result of their actions.

When a user fills a form, change the state of the Primary button from disabled to default to show what action they should take next.

Example of a button animating from disabled to enabled as a form is filled out.

Build Trust

Express the reliability of our products by using animation to create transparency, promptly validate user’s interactions, and clearly communicate what’s happening.

When functionality running in the background completes, notify the user of what has happened, and provide them with a way to take action as a result.

Example of a notification sliding on to page to alert a user to the creation of a report.

Express Our Brand

Implement animation that works in concert with the rest of Morningstar’s visual language, amplifying our attention to craft, clarity, and consistency.

When creating animations, ensure they feel consistent with the visual language of our brand and embody the attention to detail and delight we value as a company.

Building Blocks

Animation constants provide the foundational building blocks you can use to create movement and narrative within your product. All the animations within existing MDS UI components are built using these constants, and teams should use them to create the custom animations their products need.

Timing

Timing is fundamental to animation. Used properly, it helps animations feel responsive and natural. Determining which timing to use is a matter of context, including the complexity of the action and the distance over which the animation occurs.

The base increment of timing ($mds-animation-timing-1-x) is 200ms. This value was chosen for its speed, providing a sense of quickness which aligns with the craft and cleanliness of the rest of Morningstar’s visual language. Shorter timings are appropriate for things like hover states and other micro-interactions tied to individual components. Longer timings may be appropriate for more complex animations involving multiple elements, or motion which occurs over larger distances.

Constant Name	Value
$mds-animation-timing-half-x	100ms	Play Half X Animation Demo
$mds-animation-timing-1-x	200ms	Play 1 X Animation Demo
$mds-animation-timing-1-and-a-half-x	300ms	Play 1 and a Half X Animation Demo
$mds-animation-timing-2-x	400ms	Play 2 X Animation Demo
$mds-animation-timing-2-and-a-half-x	500ms	Play 2 and a Half X Animation Demo

Easing

Easing controls the velocity of an animation over its duration. It helps determine an animation’s feeling and can aid in matching the appearance of real-world physics. Easing values are plotted as curves, using the cubic-bezier CSS function.

ease-in curves accelerate, making them good for animations where an object permanently leaves the screen, e.g., a drawer being dismissed off screen. ease-out curves decelerate, they work well for objects which enter from off screen, e.g., a Modal coming on screen. ease-in-out curves initially accelerate and then decelerate. They’re the default easing for animations, and work in a variety of cases, especially for objects which can move frequently, such as an item within a drag-and-drop list.

Constant Name	Value
$mds-animation-ease-in	cubic-bezier(.5,0,1,1)	Play Ease In Animation Demo
$mds-animation-ease-out	cubic-bezier(0,0,.5,1)	Play Half X Animation Demo
$mds-animation-ease-in-out	cubic-bezier(.5,0,.5,1)	Play Half X Animation Demo

Best Practices

When creating custom animations, always keep the following points in mind to help ensure the quality and usability of your implementation.

Never let an animation block user interactions with a product.
An animation should never take so long that a user feels like they’re waiting on it to complete before they can finish what they are doing.
Only use animation when it adds something to the user experience, don’t include simply to have something animated on the page.
Never override standard MDS animations, instead, work with the design community and MDS Core Team to improve the animation within the library.
Create animations that mimic the feel of real-world physics.

Accessibility

When creating custom animations, always keep the following points in mind to help ensure the quality and usability of your implementation.

Always consider the needs of people who are sensitive to motion, e.g., individuals with vestibular disorders. Consider avoiding large, abrupt movements, or moving multiple objects at the same time in different directions.
If large scale animations play a big role in your product’s experience, offering an option to reduce motion can improve usability for people adversely affected by animation.

Link Template