The DocumentTimeline()
constructor of the Web Animations API creates a new instance of the DocumentTimeline
object associated with the active document of the current browsing context.
new DocumentTimeline(options);
We could share a single documentTimeline
among multiple animations, thus allowing us to manipulate just that group of animations via their shared timeline. This bit of code would start all the cats animating 500 milliseconds into their animations:
var cats = document.querySelectorAll('.sharedTimelineCat');
cats = Array.prototype.slice.call(cats);
var sharedTimeline = new DocumentTimeline({ originTime: 500 });
cats.forEach(function(cat) {
var catKeyframes = new KeyframeEffect(cat, keyframes, timing);
var catAnimation = new Animation(catKeyframes, sharedTimeline);
catAnimation.play();
});