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.

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.

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.

Interface standards

Transitions should reinforce common user interface (UI) standards.

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.

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 table

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

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.

Easing guidance table

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