Playback controls
The transport bar for motion: pause it, resume it, run it backward, jump to a moment, or change its speed.
See it
What it is
Playback controls expose an animation's playhead instead of letting it run as a sealed effect. Pause and resume change whether time advances, reverse changes its direction, seek assigns a specific time, and playback rate makes the same timeline run faster or slower.
Reach for them in demos, editors, tutorials, data replays, and any long sequence a user may need to inspect or repeat. The Web Animations API exposes these operations on an 'Animation' object through 'play()', 'pause()', 'reverse()', 'currentTime', and 'updatePlaybackRate()'. CSS 'animation-play-state' handles only running and paused. Chrome DevTools' Animations panel does the same job from the outside: it captures any running animation, scrubs it, and drops it to 10 percent speed.
Gotcha: controls and the visual playhead must share one source of truth. Starting a second animation when Resume is pressed creates drift and makes seeking unreliable. Label icon buttons, expose the current time and duration to the slider, and update its value without stealing focus while playback advances.
Ask AI for it
Add accessible playback controls around this Web Animations API Animation object. Wire buttons to 'play()', 'pause()', and 'reverse()', use 'updatePlaybackRate()' for 0.5x, 1x, and 2x speed, and seek by assigning 'animation.currentTime' from a labeled range input. Read duration from 'animation.effect.getComputedTiming().duration', which always resolves to a number in milliseconds, disable controls when no animation exists, give every icon button an aria-label, and keep the slider synchronized with requestAnimationFrame without moving keyboard focus.