← All Elements

Shape

Transition Choreography

Coordinating several moving parts in one transition, so people can follow what happened.

What is Transition Choreography?

Coordinating several moving parts in one transition, so people can follow what happened.

What you learn

When several things move, move them in an order people can follow.

When it helps

several things change at once, and people lose track of what moved where.

Use it at work

  1. List everything that changes in the transition.
  2. Decide what people should notice first.
  3. Move that first, then the rest in quick sequence.
  4. Make sure fast, repeated taps don’t break it.

Your output

Slow one transition in your product to a tenth of its speed and watch it. Order the movements so each one leads to the next.

Watch for

Moving everything at once, or out of sync.

Related practices

Sources

Enable JavaScript to try the interactive activity.

Elements.
48 elements · 8 families
Filters
DESIGN CONTEXT
What are you trying to do?

Scroll sideways within the map to explore all columns.

Created by Alan Hurt. Activities and notes are stored on your device. Privacy · Usage counts

ELEMENTS FIELD GUIDE