Pathwise

Manuals / Motion for Product / Chapter 3

A · Principles · beginner · ~35 min · Chapter 3 of 9

Hierarchy & choreography

What moves first matters. Stagger with purpose. Shared-element transitions beat unrelated fades.

Path progress
33%

Step 1 of 1

Choreograph a list

Parent moves, then children — or the reverse if focusing detail.

Choreograph a listDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Choreograph a listdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Prototype a list → detail transition with one shared element.

Was this step clear?
Chapter learning outcomes
  • Enter/exit
  • Shared elements
  • Stagger

Clear these before you leave