currentTime
The time on the doodle's clock in milliseconds, as Animation.currentTime.
Setting it moves every animation of the doodle to that moment together.
Syntax
- doodle.currentTime
- doodle.currentTime = 1500
The clock starts at 0 when the doodle draws, does not count paused time, and starts over on
update().
Set before the doodle draws, it applies when it does.
Setting it moves CSS animations, @t, the t of @shaders, @pattern and @scene,
SVG animations and nested doodles; @T stays the time of day.
Setting it does not pause or resume the doodle: a running one goes on from the new time.
Pause first and set frame * 1000 / 60 to step through exact frames, as for a video.
Animated images inside the doodle redraw a moment after each step.
Examples
const doodle = document.querySelector('css-doodle');
const slider = document.querySelector('input[type="range"]');
// scrub through the first five seconds
slider.max = 5000;
slider.addEventListener('input', () => {
doodle.pause();
doodle.currentTime = slider.valueAsNumber;
});