«   Previous tip Next tip   »

Chrome DevTools: Expose Web Animation API instances from the Animation Inspector

Last updated: 3rd December 2020
Expose Web Animation API instances from the Animation Inspector

We're on Tip 100 already! Thank you everyone.


You can use the Animation Inspector to export an animation so it can be programmatically controlled via JavaScript.

How to use this feature

Ensure that you are on a page with a playing animation, then, you can follow these instructions:

  1. Right click on the animation from the Animation Inspector.
  2. Select Store as global variable.
  3. Observe you now have access to a variable temp1 in the Console Panel. This variable represents an instance of the Web Animations API.

For example, evaluating the following code in the Console Panel:

temp1.constructor // Animation() { [native code] }

Confirms that the temp1 variable is an instance of a Web Animation.

The Web Animations API

You can access methods and properties of the animation instance such as:

Being able to evaulate such JavaScript expressions directly in the Console Panel is helpful for debugging.


Check out the following tips to better understand how animation tooling works in DevTools:

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week