Interruptible, pausable motion

Motion responds mid-flight; loops over 5 seconds need a pause.

Vercel Labsweb-interface-guidelines
Animations interruptible—respond to user input mid-animation
command.md · AnimationView source ↗
Vercel Labsweb-interface-guidelines
Autoplay motion >5 seconds alongside other content needs pause, stop, or hide controls
command.md · AnimationView source ↗
Vercel Labsweb-interface-guidelines
Media controls need keyboard support; decorative media needs assistive-tech hiding
command.md · AccessibilityView source ↗

From web-design-guidelines, Animation, and WCAG 2.2.2.

Change your mind halfway

Press Toggle both twice, quickly.

Keyframes, queuedBad
Invoices
animation–
Transition, retargetsGood
Invoices
transition–
.drawer {
  transform: translateX(100%);
  transition: transform 300ms var(--ease-drawer);
}
.drawer[data-open="true"] { transform: none; }

toggle.addEventListener("click", () => {
  drawer.dataset.open = String(drawer.dataset.open !== "true");
});

An 8-second loop beside a form

Type in both replies, then Tab to Pause.

No controlsBad
infinite0.0 s
Pause controlGood
animation-play-state0.0 s

<div class="hero">
  <div class="loop" aria-hidden="true">…</div>
  <button type="button" class="pause">Pause</button>
</div>

.hero[data-play="off"] .loop * { animation-play-state: paused; }

const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
hero.dataset.play = reduce ? "off" : "on";
pause.addEventListener("click", () => {
  const on = hero.dataset.play !== "on";
  hero.dataset.play = on ? "on" : "off";
  pause.textContent = on ? "Pause" : "Play";
});

Why it matters, pros and cons

Why it matters

Motion should follow the newest input. A loop beside content competes with it.

Pros

  • Rapid toggles never queue.
  • CSS transitions retarget for free.
  • One Pause button meets WCAG 2.2.2.

Cons

  • Motion that stops within 5 seconds needs no control.
  • A reversed transition replays the same curve backwards.
  • One-shot choreography can stay a keyframe.