Web/API/Animation/ready

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The read-only Animation.ready property of the Web Animations API returns a Promise which resolves when the animation is ready to play. A new promise is created every time the animation enters the "pending" play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again.

Since the same Promise is used for both pending play and pending pause requests, authors are advised to check the state of the animation when the promise is resolved.

Syntax

var readyPromise = Animation.ready;

Value

A 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:

animation.ready.then(function() {
  // Do whatever needs to be done when
  // the animation is ready to run
});

Example

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

animation.pause();
animation.ready.then(function() {
  // Displays 'running'
  alert(animation.playState);
});
animation.play();

Specifications

Specification	Status	Comment
Web AnimationsThe definition of 'Animation.ready' in that specification.	Working Draft	Editor's draft.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`ready` Experimental'	Chrome No support No	Edge No support No	Firefox Full support 63 Full support 63 Full support 46 Disabled' Disabled' From version 46: this feature is behind the `dom.animations-api.core.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 63 Full support 63 Full support 46 Disabled' Disabled' From version 46: this feature is behind the `dom.animations-api.core.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.': User must explicitly enable this feature.