Document.timeline is a read-only property that returns the document’s default DocumentTimeline — the special timeline used by the Web Animations API (MDN).
Read the notes below before you get or set this property. Prefer feature detection when support is limited.
Use document.timeline. Start with this line.
document.timeline| Call | What it does |
|---|---|
document.timeline | Primary signature. |
Built into the browser. Read or assign document.timeline — no import required.
document.timeline| Parameter | Description |
|---|---|
| Getter | Required. Default DocumentTimeline |
| Setter | Optional. Read-only |
| Return Value | Description |
|---|---|
| * | The current value of document.timeline. |
document.timelineConfirm the default timeline object type.
const tl = document.timeline;
console.log(tl.constructor.name); // "DocumentTimeline"
console.log(tl === document.timeline); // trueDocumentTimeline.currentTimeMDN: milliseconds since Performance.timeOrigin while active.
const t = document.timeline.currentTime;
console.log(t); // e.g. 1842.3
console.log(t === null); // false on a normal pagecurrentTime. Inherited from AnimationTimeline.null. Before the time origin or on a non-active document (MDN).Show that element.animate() runs on document.timeline by default.
const box = document.querySelector("#box");
const anim = box.animate(
[{ opacity: 1 }, { opacity: 0.2 }],
{ duration: 500, iterations: 1 }
);
console.log(anim.timeline === document.timeline); // true
console.log(document.getAnimations().length >= 1);animate() uses the document timeline by default.anim.timeline === document.timeline.getAnimations() can see that animation while it runs.Document.timeline is Baseline Widely available (MDN: since July 2020). Safe to use in modern evergreen browsers as part of Web Animations.
Default DocumentTimeline — established across browsers since mid-2020.
Bottom line: Safe for production animation timing. Pair with element.animate() and document.getAnimations().
Learn how to get and set the document title.
11 people found this page helpful