pause(), resume()
Pause and resume the animations of the doodle: CSS animations, @t-driven values and shader canvases.
Syntax
- doodle.pause()
- doodle.resume()
While paused the element carries a cssd-paused attribute, which sets animation-play-state: paused
on everything inside, including nested doodles and inline SVG animations.
Called before the doodle first draws, it holds, and its nested doodles start paused.
auto:update timers are not affected; use
cancelAutoUpdate() for those.
A doodle also pauses by itself while the user prefers reduced motion, unless it has
ignore-reduced-motion.
The first call to pause() or resume() takes over from that preference.
An animated @shaders, @pattern or @scene also stops drawing by itself while the doodle
is off screen, and starts again when it comes back into view. This needs no call to pause().
Examples
Toggle the rotation with a button:
const doodle = document.querySelector('css-doodle');
const button = document.querySelector('#toggle');
button.addEventListener('click', () => {
const paused = doodle.hasAttribute('cssd-paused');
paused ? doodle.resume() : doodle.pause();
button.textContent = paused ? 'Pause' : 'Resume';
});