Motion

Motion explains change: where a sheet came from, that a set was saved, which tab is now open. It should be quick enough that a coach never waits for it. Three durations and two curves cover the product; coach-admin used 20 durations.

Durations and easing

Press play to compare.

duration-(--duration-fast) 150ms
Hover, focus and pressed states; small toggles.
duration-(--duration-base) 200ms
Menus, tooltips and popovers opening; tabs switching.
duration-(--duration-slow) 300ms
Sheets and dialogs entering; larger layout changes.

ease-standard cubic-bezier(0.4, 0, 0.2, 1)
Things that move within the page, such as an accordion opening.
ease-out cubic-bezier(0.22, 1, 0.36, 1)
Things that enter, such as a sheet sliding in. Fast start, gentle stop.

What moves

Overlays enter and leave. Dialogs fade and scale slightly; sheets slide in from their edge; menus fade.
State changes ease. Hover, focus, toggles and color changes use fast.
Content doesn't dance. Lists, tables and numbers update in place. Don't animate a chart every time data loads.
Direction follows reading. A sheet from the start edge comes from the left in LTR and the right in RTL.

Reduced motion

When the operating system asks for reduced motion, movement becomes an instant change or a short fade. Nothing essential is shown only through motion.

@media (prefers-reduced-motion: reduce) {
  .sheet { transition-duration: 0s; }
}

In Tailwind, add motion-reduce:transition-none to anything that moves across the screen. The demos on this page follow your setting.