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.
auto:update timers are not affected; use
cancelAutoUpdate() for those.
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';
});Pause animations that are off screen:
const observer = new IntersectionObserver(entries => {
for (const { target, isIntersecting } of entries) {
isIntersecting ? target.resume() : target.pause();
}
});
document.querySelectorAll('css-doodle').forEach(el => observer.observe(el));