Revision 1045184 of DocumentTimeline

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

<p>the <strong><code>DocumentTimeline</code></strong> interface of the the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> represents animation timelines, including the default document timeline (accessed via {{domxref("Document.timeline")}}).</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="Properties">Properties</h2>

<p><em>This interface inherits its property from its parent, {{domxref("AnimationTimeline")}}.</em></p>

<dl>
 <dt>{{domxref("AnimationTimeline.currentTime")}}</dt>
 <dd>Returns the time value in milliseconds for this timeline or&nbsp;<code>null</code>&nbsp;if it is inactive.</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;
});
</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>