Animations

Animation brings life to static objects - it facilitates focus and can create rhythm. Animation can guide users through a workflow, enable decision-making and provide cues to take action. Used sparingly, it has the ability to ease complex workflows and reinforce structure and hierarchy of application elements and levels.

Overview

  • Use natural movement as much as possible
  • Follow-through and overlapping action; nothing starts or stops all at once
    • Easing in and out; everything takes time to speed up and slow down
    • Linear movement should be used sparingly, especially to illustrate quantifiable progress (i.e. 40 of 100 items complete)
  • The 'feeling' of animations should range between organic and technical, depending on the context and purpose
  • For all animation there is propulsion causing the movement of an object. Consider the object's mass, as well as the force projecting the object forward

Transitions

Fast and subtle

Transitions should be fast with no more than three animated properties. Animation should follow logical expectations of movement - subtle, restrained animations are more effective than overly complex ones.

Do subtly use scale, translation, and opacity.
Avoid making the transition jarring or changing an element too much.

User interaction

Transitions should be triggered by explicit user interaction. Animation is an effective tool to provide users with feedback for their actions. It can cause confusion when animation is used in an application without a user taking an action to cause it. As such, limit the use to initial page load, or to provide visual feedback to a user for an action they have taken.

Do use transitions to enhance the user experience when a user takes an action.
Avoid transitioning elements without user actions.

Individual elements

Transitions, especially while loading, should be applied to the smallest component possible. For instance, using a skeleton state animation while loading cards in-place is better than a single loading transition for the entire set.

Do use animation on small items.
Avoid using animation on large portions of an interface at once.

Interface standards

Transitions should reinforce common user interface (UI) standards.

Do follow common standards for transition interactions.
Avoid doing something unexpected when it comes to transitions and interactions.

Structural relationships

Transitions should help users understand relationships using the existing UI's hierarchy and structure. Use subtle translations and movements together with application levels. Elements should be invoked and dismissed from where a user takes action.

Do invoke elements from where a user has taken action.
Avoid invoking elements towards the triggering element.Avoid invoking elements far from where the action occurred.

Duration

Movement should be slow enough that the user can recognize what's happening, but fast enough that they are never waiting. The magnitude of change in an animation and its importance combine to determine its duration. Most transitions should fall between 100 and 600 milliseconds, depending on context and object mass.

Large items should move slower.
Small items should move faster.

Duration guidance table

The table below displays recommended durations for components and elements in milliseconds.

DurationComponent
100 - 200msButtons, toggles, small components
300 - 400msAlerts, card sorting, reordering
400 - 500msPanels and modals
500 - 600msPage loads and large components

Easing

Easing specifies the rate of change of an object over time. Objects in real life don't start and stop instantly. Therefore, the easing principles provided below will guide you on page element behavior. It's good to keep in mind mass when easing, as larger objects take longer to speed up versus smaller objects. When in doubt - ease in and out.

Add correct easing when animating elements.

Easing guidance table

The table below displays recommended easing animation for components and elements.

Animation typeEasing type
Entering screenEase out
Exiting ScreenEase in
Color / opacity changeLinear
Movement within screenEase in-out

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.