Animation – Meaningful transitions

Google ©

Privacy & Terms

Meaningful transitions

Motion design can effectively guide the user’s attention in ways that both inform and delight. Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.

Visual continuity Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Transitioning between two visual states should be clear, smooth, and effortless. A well-designed transition tells the user where to focus their attention.

Transition types and actions:

  • Incoming elements: Newly generated or translated items are introduced or re-established.
  • Outgoing elements: Elements no longer relevant to the context are removed.
  • Shared elements: Elements that persist for the duration of a transition can be subtle (a single icon) or dominant (a gallery image growing to fill the screen).

Related

Customize Activity Transitions
Coordinate the entrance and exit of animations.

Transition elements can be incoming, outgoing, or persist on screen for the duration of the transition.

Considerations

When designing animations, consider the following:

  • Direct user attention. How should the user’s attention should be directed? What elements and motions support that goal? How should incoming, outgoing, and shared elements be emphasized or de-emphasized through the transition?
  • Connect transitions visually. Create visual connections between transition states through color and persistent elements.
  • Use movement with precision. Consider how moving a certain element adds clarity and delight to a transition.
Do.

Incoming material elements may expand into view, but content should only fade in. Full screen cross-fades are not desirable, but preferred over cuts.

Don't.

Hard cuts are jarring and require the user to do all the work in order to understand the transition.

 

Hierarchical timing Expand and collapse content An arrow that points down when collapsed and points up when expanded.

When building a transition, consider the order and timing of element movement. Ensure that motion supports the information hierarchy, conveying what content is most important by creating a path for the eye to follow.

However, it’s not a simple formula in which the most important thing moves first and the least important last. The timing of transition elements should flow smoothly and avoid feeling disjointed.

Do.

Use overlapping motion to direct user attention.

Don't.

Timing element transitions to occur at the same moment provides no indication of what is important. If all elements have equal importance, consider introducing them as a group.

   

Consistent choreography Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Transitioning elements should behave in a coordinated manner. The paths elements travel along should make sense and be orderly. Haphazard motion is distracting.

When transitioning elements are coordinated, it aids user understanding of the app.

Do.

Direct user attention with coordinated, orderly motion.

Don't.

Don’t confuse users with inconsistent or disorderly motion and objects leaving/entering in random directions.

Related

Best Practices

  • Avoid linear spatial paths, except when movement is constrained to an axis or moving towards/away from a point in concert with other elements.
  • Make the direction elements travel cohesively across the transition. Avoid conflicting movements and overlapping paths.
  • At which depths do the elements move and why?
  • If all moving elements traced their paths on screen, would it look beautiful and organized? Does it create a clear picture of where to look?
  • Reinforce spatial relationships between elements with consistent incoming and outgoing motions.