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.

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.

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.

Transitions should reinforce common UI metaphors

Don't do anything crazy, in short.

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.

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.

Duration guidance

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

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.

Easing guidance

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