Lumina

Manuals / Motion for Product / Ch 4

A · PrinciplesIntermediate35 min read

4. Timing, easing, duration

Motion for Product · 36 pages source format

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.

What you'll learn

  • Duration ranges
  • Easing curves
  • Spring caution

Same motion, three easings

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

/* 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.

Clear?

Checklist