Motion
Motion helps enhance the user experience by making a user interface both easy to use and more expressive.
Did this page help you?
Why we need motion
Motion helps draw a user’s attention to key elements and interactions on a page, without interrupting their focus from the overall task. By showing how an element moves or changes from one state to another, motion helps prevent the user interface (UI) from changing too abruptly. When paired with other feedback mechanisms, motion can help users understand the consequences of their actions over the interface. To incorporate motion into a user experience in a coherent and consistent way, follow the set of guidelines mentioned below.
Motion principles
Intentional
Motion should be used purposefully and judiciously. It should increase usability and guide emotion for users.
Focused
Use motion to draw a user’s attention to important aspects of the interface without distracting them from the primary task.
Delightful
Use motion to make the user experience more delightful and approachable.
Transform patterns in motion
To unify the forms of motion in the system, our components use the following transform patterns.
Scale
Scaling content into view draws users’ attention to the item that is in motion. For instance, Modal reveals while scaling up to focus users’ attention.
Fade
Fading makes it smooth to show and hide elements. It’s widely used in motion in Cloudscape components such as Modal, Select, Date picker, and Date range picker, etc.
Slides
Sliding signifies spacial and structural clues that makes the interactions expected, for instance, Side navigation, Help panel, Split panel, etc. slide in from the direction of the trigger.
Properties of motion
Motion speed adjustments include easing (acceleration over time) and duration (how long a transition lasts).
Easing
In the real world, objects tend to accelerate or decelerate as opposed to moving at a constant rate. This allows for different speeds of movement to provide character. For example, snappier movements reflect responsiveness, whereas expressive ones create moments of delight. To make motion more purposeful and natural to the human eye, we use a set of defined streamlined easing curves. These easing curves are used by our components in combination with duration.
Curve A (0.00, 0.00, 0.00, 1.00)
Curve A provides responsive yet smooth visual feedbacks.
Examples:
Duration
Duration, or the amount of time that motion takes to complete an action, is defined in three ways. The correct use of duration in combination with easing provides smooth and purposeful transitions without disorienting users.
Duration: 115MS
This 115MS duration is supposed to make the motion quick and responsive.
Examples:
Duration: 165MS
165MS accommodates the motion with more expressiveness.
Examples:
Shaking icon on an error state of Form field (with easing curve A)
Link (with easing curve C)
Duration: 250MS
To draw more attention or accommodate for more complexity, 250MS gives the space for that.
Supported use cases
Showing and hiding elements
Motion helps prevent the UI from changing too abruptly when an incoming element appears or an outgoing element disappears from the viewport.
a. Dropdown
An incoming dropdown on Select fades and slides in when appearing below its trigger. This motion helps give users spacial and structural clue over the interface.
Fade in
Easing: Curve A
Duration: 115MS
Scale
Easing: Curve A
Duration: 115MS
Other examples: Button dropdown, Date picker, Date range picker
b. Modal
The Modal appears while fading in and scaling up to draw users’ attention.
Fade in
Easing: Curve A
Duration: 115MS
Scale
Easing: Curve A
Duration: 115MS
c. Panels
The Side panel slides in from its trigger.
Slide in
Easing: Curve A
Duration: 115MS
Example: Side navigation and Help panel in dashboard demo
d. Flashbar
The Flashbar slides in from top of the screen.
Slide in
Easing: Curve C
Duration: 250MS
Example: Flashbar in Delete with additional confirmation demo
State transitions
Motion is used to highlight a change of state in an element. It eases the transition between states and notifies users to the change of state.
a. Getting an error
When an error occurs, a small shake movement brings attention to the warning, as demonstrated with the Form field component.
Fade in
Easing: Curve A
Duration: 165MS
Shake 5px on either side
Easing: Curve A
Duration: 165MS
b. Link
The combination of easing Curve C and 165MS duration makes the transition on Link component smooth yet noticeable, conveying interactivity.
Change in color and added underline on hover
Easing: Curve C
Duration: 165MS
Drag-and-drop
Motion is used when an item moves and when it takes a new position. It eases the transition between an items position and notifies the users of the new location.
a. Swap
A board item moves to give room for a new item. An item moves to a new location when a selected item is dragged to take its old position. The item slides to its new position.
Slide in
Easing: Curve A
Duration: 115MS
b. Transition to new location
A board item is dropped to take its new position. When an item is moved to or close to its target location and released. It transitions to its new position.
Slide in
Easing: Curve A
Duration: 115MS
Loading states
With continuous motion, loading states inform users about actions in progress or other operations running in the background. A rotating spinner motion, or progression of a progress bar are examples of its displaying the loading state. For more details about the usage, see the guidelines for loading and refreshing.
a. Spinner
Resources
Variable name | Current value | Description |
|---|---|---|
Loading resources | ||
Accessibility in motion
Certain users with reduced or no vision may not be able to perceive motion, due to their dependence on assistive technologies such as screen readers or reduced motion settings for their operating system (OS). To ensure an accessible experience for all users, follow these guidelines:
Respect users' default motion preferences from their OS settings. Use the
prefers-reduced-motionCSS media feature to disable motion.Do not have motion that flashes more than three times in any one second period, because it can trigger epileptic seizures or physical reactions especially for users who have vestibular disorders.
Ensure that the user interface looks and behaves so that it’s perceivable to all users, without relying on motion alone.
Implementation
Enabling motion
Motion is active by default in all components.
Respecting user preferences
If a user prefers reduced motion on their interfaces, they can specify this at the operating system level. In a web browser, this is reflected by the prefers-reduced-motion CSS media feature, and is currently supported by a number of browsers. See the MDN documentation for more details. If the user's browser supports this media feature, the design system respects the user's preferences and deactivates all non-essential animations.
Use in custom components
The design tokens provide easing curves, duration values, and animation keyframes names for adding motion to custom components. You can use these tokens for defining CSS transitions or CSS animations on elements as shown below.
@use '@cloudscape-design/design-tokens/index' as awsui;
.custom-popup {
// Defining an entry animation using the fade-in keyframe
animation:
awsui.$motion-keyframes-fade-in awsui.$motion-duration-responsive awsui.$motion-easing-responsive,
awsui.$motion-keyframes-scale-popup awsui.$motion-duration-responsive awsui.$motion-easing-responsive;
animation-fill-mode: both;
}
.custom-caret {
// Adding a transition for changes to the transform property
transition:
transform
awsui.$motion-duration-responsive
awsui.$motion-easing-responsive;
&.active {
transform: rotate(90deg);
}
}