DocumentTimeline.DocumentTimeline()

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

Specification Status Comment
Web Animations
The definition of 'DocumentTimeline()' in that specification.
Working Draft Editor's draft.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 61Edge No support NoFirefox Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 50 — 63
Disabled
Disabled From version 50 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera ? Safari No support NoWebView Android Full support 61Chrome Android Full support 61Edge Mobile No support NoFirefox Android Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 50 — 63
Disabled
Disabled From version 50 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

Document Tags and Contributors

Contributors to this page: fscholz, jpmedley, birtles, rachelnabors, chrisdavidmills
Last updated by: fscholz,