A named duration scale

Pick the duration step by how far the thing moves, not by habit.

From polaris-tokens, motion tokens. Step choice is our rule of thumb.

Small move, large move

Move the small dot, then the wide one, in both panes.

One step for bothBad
Small, 40px
Large, full width
transition: transform var(--p-motion-duration-500)
Step follows distanceGood
Small, 40px
Large, full width
duration-150 small · duration-300 large
/* Polaris duration steps */
--p-motion-duration-0:   0ms;
--p-motion-duration-50:  50ms;   --p-motion-duration-100: 100ms;
--p-motion-duration-150: 150ms;  --p-motion-duration-200: 200ms;
--p-motion-duration-250: 250ms;  --p-motion-duration-300: 300ms;
/* 350 to 500ms also exist: keep them for large surfaces */
--p-motion-duration-350: 350ms;  --p-motion-duration-400: 400ms;
--p-motion-duration-450: 450ms;  --p-motion-duration-500: 500ms;
--p-motion-duration-5000: 5000ms;

/* our rule of thumb */
.nudge  { transition: transform var(--p-motion-duration-150) var(--p-motion-ease-out); }
.slide  { transition: transform var(--p-motion-duration-300) var(--p-motion-ease-out); }

Why it matters, pros and cons

Why it matters

Polaris names every duration step from 50 to 500ms. Mapping step to distance is our rule of thumb: short hops get short steps, wide slides get longer ones.

Pros

  • Named steps are easy to review and to change together.
  • A small move stays crisp instead of dragging.
  • A wide move gets enough time to be followed.

Cons

  • Polaris does not say which step fits which distance.
  • Our house cap is 300ms; 350-500ms is for large surfaces only.
  • More steps to choose from means more room to drift.