DocumentTimeline()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

Syntax

var sharedTimeline = new DocumentTimeline(options);

Parameters

options

An object specifying options for the new timeline. Currently the only supported option is the originTime member which specifies the zero time for the documentTimeline as a real number of milliseconds relative to the navigationStart moment of the active document for the current browsing context.

Examples

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();
});

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DocumentTimeline
84
84
75
63-75
No
70
13.1
84
84
79
63-79
60
13.4
14.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DocumentTimeline/DocumentTimeline