Revision 1045028 of DocumentTimeline

<p>{{ SeeCompatTable() }}&nbsp;{{ APIRef("Web Animations API") }}</p>

<p>Document timelines, including the default document timeline,&nbsp;<code>{{domxref("Document.timeline")}}</code>,&nbsp;are represented in the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>&nbsp;by the <strong><code>DocumentTimeline</code></strong> interface.</p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("DocumentTimeline.DocumentTimeline()")}}</dt>
 <dd>Creates a new <code>DocumentTimeline</code> object associated with the active document of the current browsing context.</dd>
</dl>

<h2 id="Attributes">Attributes</h2>

<dl>
 <dt><code><a href="/en-US/docs/Web/API/AnimationTimeline/currentTime">DocumentTimeline.currentTime</a></code></dt>
 <dd>Returns the time value in milliseconds for this timeline or&nbsp;<code>null</code>&nbsp;if this timeline is inactive. (Inherited from&nbsp;<code>{{domxref("AnimationTimeline")}}</code>.)</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>We could share a single&nbsp;<code>documentTimeline</code> 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:</p>

<pre class="brush: js">
var cats = document.querySelectorAll('.sharedTimelineCat');
cats = Array.prototype.slice.call(cats);

var sharedTimeline = new DocumentTimeline(500);

cats.forEach(function(cat) {&nbsp;
&nbsp; var catKeyframes = new KeyframeEffect(cat, keyframes, timing);
&nbsp; var catAnimation = new Animation(catKeyframes, sharedTimeline);
&nbsp; catAnimation.play();
&nbsp;&nbsp;
});
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Animations', '#the-documenttimeline-interface', 'DocumentTimeline' )}}</td>
   <td>{{Spec2('Web Animations')}}</td>
   <td>Editor's draft.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{ CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
 <li>{{domxref("AnimationTimeline")}}</li>
 <li>{{domxref("AnimationTimeline.currentTime")}}</li>
 <li>{{domxref("Document.timeline")}}</li>
 <li>{{domxref("DocumentTimeline.DocumentTimeline()")}}</li>
</ul>