DocumentTimeline()

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

new DocumentTimeline(options)

Parameters

options

An object specifying options for the new timeline. The following properties are available:

originTime

A number that specifies the zero time for the documentTimeline as a real number of milliseconds relative to the navigationStart time 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:

let cats = document.querySelectorAll('.sharedTimelineCat');
cats = Array.prototype.slice.call(cats);

const sharedTimeline = new DocumentTimeline({ originTime: 500 });

cats.forEach((cat) => {
  const catKeyframes = new KeyframeEffect(cat, keyframes, timing);
  const catAnimation = new Animation(catKeyframes, sharedTimeline);
  catAnimation.play();
});

Specifications

Specification
Web Animations
# dom-documenttimeline-documenttimeline

Browser compatibility

BCD tables only load in the browser

See also