Animations

Overview

Motion brings life to static objects - it facilitates focus and can create rhythm. It can guide users through a workflow, enable decision-making and provide cues to take action

General approach

Motion in interactive applications can help increase productivity and guide users through complex tasks. Used sparingly, it has the ability to ease complex workflows and help reinforce structure and hierarchy of application elements and levels.

The basics

  • 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 motion there is propulsion causing the movement of an object. Always keep in mind the object's mass, as well as the force projecting the object forward

Transitions

Transitions should be fast with no more than three animated properties

Motion 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.
Transitions should be triggered by explicit user interaction

Motion is an effective tool to provide users with feedback for their actions. It can cause confusion when motion 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.
Transitions should occur on 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 motion on small items.
Avoid using motion on large portions of an interface at once.
Transitions should reinforce common UI metaphors

Don't do anything crazy, in short.

Do follow common standards for transition interactions.
Avoid doing something unexpected when it comes to transitions and interactions.
Transitions should help users understand relationships

Motion should reinforce existing application hierarchy and structure. Use subtle translations and movements together with application levels. Mostly, 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

The table below displays recommended millisecond durations for components and elements.

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 just start and stop instantly. Therefore, the easing principles provided below will guide you on how page elements will behave in their natural environment. It’s good to keep in mind mass when easing, as larger objects take longer to speed up vs smaller objects. A rule of thumb: when in doubt, ease in and out.

Add correct easing when animating elements.

Easing guidance

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

Motion 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.