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.
var sharedTimeline = new DocumentTimeline(options);
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.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(); });
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'DocumentTimeline()' in that specification. | Working Draft | Editor's draft. |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 61 | No support | No support | ? | No support |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 61 | 61 | No support | No support | No support | ? | No support |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DocumentTimeline/DocumentTimeline