Transitions vs. animations
Transitions only have start and end points. Less control in motion, but simple in design and implementation, and tend to perform better. They should be used for most simple movements.
Animations are more complex movements with multiple keyframes. Increased control over movement, appear more lifelike, but are more complex to design and implement. Should only be used for special cases.
Transitions are sufficient in most cases to represent movement in the UI and should be used primarily. Animations should only be used in special cases when:
- transitions cannot be used for the movement or
- special actions are to be highlighted via the movement in order to increase user engagement.
Motion principles
Appealing: Motion can be used to build a connection with users and create unique experiences.
Selective: Motion should be used selectively. It highlights certain actions and guides users.
Harmony: Motion should complement the design and harmonize with the other UI elements.
Natural: Motion should feel natural and convey a sense of familiarity.
Focus: Use motion to highlight important information and special actions, and to create focus.
Consistency: Users recognize patterns and develop familiarity with consistency in motion.
Interplay: Motions should interact, feel harmonious, and create a consistent flow that directs the user's attention.
Semantic motion clusters
For convenience and maximum consistency it is recommended to use semantic motion tokens wherever possible. They combine durations and easings for specific cases and are structured into the following clusters.
Embedded prototype: doge-zebra-01384131.figma.site › Motion
Base design tokens
When it is not possible to work with semantic motion design tokens, use base duration and easing tokens.
Duration
Choose from the available durations using the following guidelines:
Snappiness: Motion should feel smooth and snappy. Animations and transitions that are too long result in poorer UX and make the app feel slow and sluggish.
Duration and distance: The greater the distance traveled within the viewport, the longer the duration.
Human vs. machine: Motion initiated by users tend to be slightly slower in order to establish a connection between the interaction and the animation. But be careful: this should be understood in relative terms; motion should not feel clumsy or excessively long.
Invite & Dismiss: Invite and dismiss: Invite motions are slower, showing users that a new element is appearing in the viewport. Dismiss animations are faster because disappearing elements do not need emphasis.
Embedded prototype: doge-zebra-01384131.figma.site › Duration
Easing
For most motions, use the easings from the "default" cluster. Use "expressive" easings for special moments that require attention or highlight an action.
Since the "expressive" easings have higher accelerations, they should generally be combined with slightly longer durations (at least from the "medium" cluster).
Embedded prototype: doge-zebra-01384131.figma.site › Easing
Accessibility
Reduced Motion
Even though reduced motion only has to be respected in order to fulfill WCAG 2.1 AAA, it shall still be considered as it helps people with disabilities, could become part of AA standard practice in the future.
We have a system in place, where duration design tokens can be tagged in order to to respect the reduced motion user preference. When activated, these duration tokens are set to a duration of 0ms - effectively resulting in no visible motion.