Newskit Logo

Foundation

Motions

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 utilised by animations and transitions.

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

Overrides

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 occurser which the animation occurs.

DurationTokenToken valueCommon uses
motionDuration000
0ms
-
motionDuration010
100ms
Sliders, Progress Indicators
motionDuration020
200ms
Text Inputs
motionDuration030
300ms
Buttons, tags, checkboxes, switches, menu items
motionDuration040
400ms
Modals, drawers, toasts, banners
motionDuration050
500ms
Nav bars

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
motionTimingLinear
linear
Has the same even speed from start to end.
motionTimingEaseIn
cubic-bezier(.5, 0, 1, 1)
Curves accelerate; useful for animations where an object permanently exits the screen e.g. a drawer being dismissed
motionTimingEaseOut
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
motionTimingEaseInAndOut
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.

These should use the animation-timing-function css property the foundations.

Usage

The following guidance describes how and when to appropriately use motion.

Do

Motion should simply and effectively highlight important details and emphasise key points in a user journey.

Do not

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.

Do not

Avoid motion that is too fast for users to follow.

Do not

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.

Learn more about accessibility considerations for Motion

Overlays

Overlays are used for styling UI elements.

Overlays are used for styling UI elements.