Motion is used to create movement and narrative within a product. Animated interface elements don't just attract attention, they enhance user experience and help guide user flow: They reveal the functionality and process of a user interface by communicating where to focus and what to do next.
Motion foundations are utilised by animations and transitions.
Motion should help draw attention to important details and emphasise key points in a user journey without creating unnecessary distractions.
Motion should add to a brand's character and the way it expresses itself to users.
Motion should mimic the feel of real-world physics, to give motion a natural and discernible feeling.
Determining which timing to use is a matter of context, including the complexity of the action and the distance over which the animation occurser which the animation occurs.
|Duration||Token||Token value||Common uses|
|Sliders, Progress Indicators|
|Buttons, tags, checkboxes, switches, menu items|
|Modals, drawers, toasts, banners|
Timing controls the velocity of motion over its duration. It helps determine an animation’s feeling and can aid in matching the appearance of real-world physics by controlling how objects accelerate and decelerate as they move on the screen. NewsKit uses four different types of timing.
|Timing||Token||Token value||Common uses|
|Has the same even speed from start to end.|
cubic-bezier(.5, 0, 1, 1)
|Curves accelerate; useful for animations where an object permanently exits the screen e.g. a drawer being dismissed|
cubic-bezier(0, 0, .5, 1)
|Curves decelerate; they work well for objects which appear from off of the screen e.g. a Drawer entering the screen|
cubic-bezier(.5, 0, .5, 1)
|Curves initially accelerate and then decelerate. They’re the default easing for animations and work in variety of cases, especially for objects that can move frequently from place to place on the screen e.g. an item with an drag-and-drop list.|
The following guidance describes how and when to appropriately use motion.
Motion should simply and effectively highlight important details and emphasise key points in a user journey.
Motion should not distract or block the user from what they are doing, or take so long that a user feels like they’re waiting on it to complete before they can finish what they are doing.
Avoid motion that is too fast for users to follow.
Avoid motion that is overly slow, preventing a user from advancing in their user journey.
When creating custom animations using the motion foundations, the following should be considered to help ensure the quality and usability of your implementation:
If motion plays an extensive role in your product’s experience, offer an option to reduce motion to improve usability for people who could be adversely affected by motion on screens.
Always consider the needs of people who are sensitive to motion. Consider avoiding large, abrupt movements, or moving multiple objects at the same time in different directions.