Newskit Logo
Newskit Logo
View Github

Foundation

Motion

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.

Overview

Motion foundations are used in animations and transitions.

Learn more about how Motion foundations are applied to animations and transitions via Motion Presets.

Overrides

Default Motion in the foundations can be overridden. Learn more about overriding default Motion in the theme.

Principles

Purposeful

Motion should help draw attention to important details and emphasise key points in a user journey without creating unnecessary distractions

Seamless

Motion should add to a brand's character and the way it expresses itself to users

Instinctive

Motion should mimic the feel of real-world physics, to give motion a natural and discernible feeling

Duration

Determining which timing to use is a matter of context, including the complexity of the action and the distance over which the animation occurs.

DurationTokenToken valueCommon uses

These should use the animation-duration css property.

Timing

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.

TimingTokenToken valueCommon uses

These should use the animation-timing-function

Usage

The following guidance describes how and when to use motion.

Do

Motion should be used to highlight important details and emphasise key points in a user journey.

Don’t

Motion should not distract or block the user from what they are doing.

Don’t

Avoid motion that is too fast for users to follow.

Don’t

Avoid motion that is overly slow, preventing a user from advancing in their user journey.

Accessibility considerations

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.

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.