Skip to content
Skip design navigation
Etesie Alpha
Loading account
← Back to the motion picker
Motion · Use the system · Guide

A transition is an argument about relationship

Easing and duration decide how one change feels. A transition pattern decides what the change claims: that two surfaces are the same object, that one sits inside the other, or that they have nothing to do with each other. Pick the pattern from the relationship, then let the pairing follow.

Container transform

“This thing became that thing.”

Use for
A list item opening into its detail page, a card expanding into a sheet, a search field becoming a results surface.
Don't
When the two surfaces are unrelated — the promise of continuity would be a lie.

Forward and backward

“You moved a step deeper, or back out.”

Use for
A step in a flow, drilling into a hierarchy, a wizard advancing.
Don't
Between peers — depth movement implies a parent/child relationship that is not there.

Lateral

“You moved sideways, between peers.”

Use for
Tabs, a carousel, paging through items at the same level.
Don't
Reversing the direction of travel — it reads as going back when you went forward.

Top level

“These destinations are unrelated.”

Use for
Switching between navigation-bar destinations.
Don't
Spatial movement of any kind. There is no relationship to express, so a fade is the honest answer.

Enter and exit

“Something arrived on, or left, a screen that stays put.”

Use for
A FAB, a snackbar, a menu, a chip being added or removed.
Don't
Reusing the entrance curve on the way out — exits accelerate, entrances decelerate.

Skeleton loaders

“This content is on its way.”

Use for
A known layout waiting on data, so the page does not reflow when it lands.
Don't
Shapes that do not match the real content — the correction is worse than a spinner.

Two rules that survive every pattern

  1. The outgoing surface leaves faster than the incoming one arrives. Exits use an accelerating curve and a shorter duration; nothing needs to be read on the way out.
  2. Never cross patterns within one gesture. If tapping a card runs a container transform, the back gesture runs it in reverse — not a lateral slide. A transition that does not undo itself makes the hierarchy unlearnable.