index.html

---
title: Animation.ready
slug: Web/API/Animation/ready
tags:
  - API
  - Animation
  - Experimental
  - Property
  - Ready
  - Ready Promise
  - Reference
  - Web Animations
  - web animations api
browser-compat: api.Animation.ready
---
<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>

<p>The read-only <strong><code>Animation.ready</code></strong> property of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> returns a {{jsxref("Promise")}} which resolves when the animation is ready to play. A new promise is created every time the animation enters the <code>"pending"</code> <a href="/en-US/docs/Web/API/Animation/playState">play state</a> as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again.</p>

<div class="note">
<p><strong>Note:</strong> Since the same {{jsxref("Promise")}} is used for both pending <code>play</code> and pending <code>pause</code> requests, authors are advised to check the state of the animation when the promise is resolved.</p>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js">var <em>readyPromise</em> = <em>Animation</em>.ready;
</pre>

<h3 id="Value">Value</h3>

<p>A {{jsxref("Promise")}} which resolves when the animation is ready to be played. You'll typically use a construct similar to this when using the ready promise:</p>

<pre class="brush: js">animation.ready.then(function() {
  // Do whatever needs to be done when
  // the animation is ready to run
});</pre>

<h2 id="Example">Example</h2>

<p>In the following example, the state of the animation will be <code>running</code> when the <strong>current ready Promise</strong> is resolved because the animation does not leave the <code>pending</code> play state in between the calls to <code>pause</code> and <code>play</code> and hence the <strong>current ready Promise</strong> does not change.</p>

<pre class="brush: js">animation.pause();
animation.ready.then(function() {
  // Displays 'running'
  alert(animation.playState);
});
animation.play();
</pre>

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

{{Specifications}}

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

<p>{{Compat}}</p>

<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("Animation")}}</li>
 <li>{{domxref("Animation.playState")}}</li>
</ul>