Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

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.

Overrides

You can override default motion in the foundations. Learn more here.

Duration

Timing is a matter of context. Consider the complexity of the action and the distance over which the animation occurs.

DurationTokenToken valueCommon uses

You should use the animation-duration CSS property.

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:

TimingTokenToken valueCommon uses

You should use the animation-timing-function CSS property.

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

Learn more about motion accessibility considerations.

Outlines

Outlines provide visual cues about the focus or active states of elements.

Learn more about outlines

Outlines

Outlines provide visual cues about the focus or active states of elements.