Motion

Springs

Easing curves

Cubic curves for what is not a spring: leaving the screen, entering panels, the sidebar folding, the theme switch and cards changing columns.

Durations

Fixed durations for the moments that are not a spring. Each is used with the easing named beside it in the guidelines below.

Theme switch

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--sonar-motion-duration-theme);          /* 700ms */
  animation-timing-function: var(--sonar-motion-easing-crossfade); /* cubic-bezier(.4,0,.2,1) */
}

/* Without View Transitions: colors ease */
.sonar-theming, .sonar-theming * {
  transition: color var(--sonar-motion-duration-theme-fallback) ease,
              background-color var(--sonar-motion-duration-theme-fallback) ease !important;
}

function switchTheme(next) {
  const apply = () => (document.documentElement.dataset.theme = next)
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return apply()
  if (document.startViewTransition) {
    // the knob slides first (200 ms), then the page cross-fades
    return setTimeout(() => document.startViewTransition(apply), 200)
  }
  document.documentElement.classList.add('sonar-theming')
  apply()
  setTimeout(() => document.documentElement.classList.remove('sonar-theming'), 300)
}

In code

Every spring is two custom properties, a duration and an easing, always used together.

.accordion-panel {
  transition: height var(--sonar-motion-spatial-default-duration)
                     var(--sonar-motion-spatial-default-easing);
}

.menu {
  transition: opacity var(--sonar-motion-effects-fast-duration)
                      var(--sonar-motion-effects-fast-easing);
}

Guidelines

• Bounce only when a dragged card lands in its slot and when an action succeeds. Everywhere else, motion settles without overshoot.
• Side panels enter from 48 px in 420 ms with a fade, and leave by 28 px in 150 ms on the accelerate curve. On tablets the panel slides all the way in from the right edge on the default spatial spring (320 ms) and back out the same way, as Navigation by device shows. On phones the sheet rises in 420 ms (fade 200 ms) and drops in 220 ms.
• Menus open from 0.9 in 200 ms with a 138 ms fade, and close to 0.96 in 110 ms on cubic-bezier(.3,0,.8,.15). The search list drops 4 px from 0.98 in 180 ms.
• Tooltips wait 300 ms, then grow from 0.96 in 140 ms; they leave with a 90 ms fade. The chart bubble only fades, in 200 ms.
• Hover and other state changes take 160 ms on cubic-bezier(.23,1,.32,1).
• Editing the overview: a lifted card grows to 1.03 (200 ms) and rises to elevation 4; its height follows in 320 ms. Dropped, it settles in 500 ms on the expressive spring. Neighbors and resizes move in 320 ms. When the column count changes, cards travel to their new places in 620 ms on cubic-bezier(.2,0,0,1).
• Theme changes never move content: only the switch’s knob slides, then the page fades.
• With reduced motion requested, spatial movement is replaced by an immediate change; fades stay, shortened, to keep the change perceptible.