Pathwise

Manuals / Motion for Product / Chapter 4

A · Principles · intermediate · ~35 min · Chapter 4 of 9

Timing, easing, duration

Duration ~150–300ms for most UI. Ease-out for enters, ease-in for exits (common pattern). Linear feels mechanical; bounce is usually wrong for productivity UI.

Path progress
44%

Step 1 of 1

Same motion, three easings

Compare linear, ease-out, overshoot on a drawer.

Same motion, three easingsDrag 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 →Same motion, threedrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

/* typical product defaults */
.enter { transition: transform 200ms ease-out, opacity 150ms ease-out; }
.exit  { transition: transform 150ms ease-in,  opacity 100ms ease-in; }

Do this now

Record or screenshot the three. Pick one and justify in one sentence.

Was this step clear?
Chapter learning outcomes
  • Duration ranges
  • Easing curves
  • Spring caution

Clear these before you leave