Foundation
Motion
Motion creates movement and narrative in a product. It can guide users, enhance their experience and show them where to focus.
Overview
You can use motion foundations in animations and transitions.
Learn more about how motion foundations are applied to animations and transitions via transition presets.
Duration
Timing is a matter of context. Consider the complexity of the action and the distance over which the animation occurs.
| Duration | Token | Token value | Common uses |
|---|
Timing
Timing controls the velocity of motion over its duration. It helps determine an animation’s feel and can help you mimic real-world physics by controlling how objects accelerate and decelerate as they move on the screen.
NewsKit uses four types of timing:
| Timing | Token | Token value | Common uses |
|---|
How to use motion
Here’s how and when to use motion:
Do use motion for emphasis
Motion should highlight important details and key points in a user’s journey.
Don’t distract the user
Motion shouldn’t distract or block the user from what they’re doing.
Don’t make motion too fast
Avoid motion that’s too fast for the user to follow.
Don’t make motion too slow
Avoid motion that’s too slow and prevents a user from advancing.
Accessibility
When creating custom animations using the motion foundations, consider the following to make sure everyone can use your product:
If motion plays an extensive role in your product, offer an option to reduce motion to improve usability for people who could be adversely affected by motion on screens
Consider the needs of people who are sensitive to motion. Think about avoiding large, abrupt movements, or moving multiple objects at the same time in different directions
Outlines
Outlines provide visual cues about the focus or active states of elements.
Outlines
Outlines provide visual cues about the focus or active states of elements.