Chromium Developer Tools – Animations

As a web developer, you are probably familiar with Chromium’s Developer Tools. These tools allow you to perform essential tasks such as viewing and editing the raw DOM structure of a webpage, reading Console logs, and clearing your Local Storage.

However, if you are like most developers (which included me, before writing this post) you probably aren’t aware that there are many tools in addition to the most commonly used ones. In this article, we’re going to take a closer look at specifically the Animations tool.

Note that these tools will work on any browser that is based on the Chromium engine (such as Brave or Microsoft Edge), not just on Google Chrome.

Download the Codebase

You can download the source code for this project if you don’t want to set it up yourself: https://github.com/fearnycompknowhow/chromium-animation-dev-tool

Where is the tool?

Before we can open the Animations tool specifically, we must first open the Developer Tools as a whole. Look for the context menu button at the top right corner of your browser; this icon might look different for you based on which Browser you’re using.  As for myself, I’m using the Brave Browser.

Expand the “More Tools” menu and then select “Developer Tools”:

Now that the Dev Tools are open, you need to open the Animations tool specifically. Look for the context menu button on the top right corner of your Dev Tools, expand the “More Tools” menu, and select “Animations”:

You should now see that a new “Animations” tab is open at the bottom of your Dev Tools. Within that tab you should see a Timeline of all the animation frames that are on the page at the time. If the Timeline is empty, you probably need to refresh the page.

Each frame of the Timeline contains a grouping of which Animations started at the same time. If, for example, a new element is added to the DOM that plays an animation, you’ll see that as a separate frame, because it started at a separate time from the other animations.

When you click on an entry in the Timeline, you will see an expanded view of all the animations that are contained within that frame. The animations will be further associated with which element they were tied to:

You can see there are two animations (“fade-in-background”, “fade-out-border”) that are associated with a <div> that has a “container” class on it, and there is one animation (“fade-in-text”) that is associated with a <div> that has a “logo” class on it.

Controlling & Editing Animations

The following is a description of what each of the various controls do:

1. Clears the Timeline of all frames;
2. Pause/play all of the animations within the selected frame;
3. Adjust the speed at which the animations play;
4. The time position within the current frame;
5. Play/replay the animations within the current frame;
6. Time marks that make it easy to determine how long an animation lasts and how far it has progressed;
7. An indicator of how far the current frame has progressed. This can be dragged back and forth to rewind and fast forward the current frame;
8. Can be dragged to adjust when a particular animation starts and ends within the frame.

If you click on any of the animations, you’ll see the styling that configures that particular instance of the animation within the “styles” tab.  What’s more if you adjust the length and/or position of the animations using the sliders in the Animation tab, you’ll notice that the corresponding styling is modified in the styles tab:

Lastly, the following feature technically isn’t part of the Animation tool specifically, but it definitely makes developing animations easier.  If you click on one of those icons next to the timing algorithm of the animation, you will see an interactive animation editor that visualizes the timing of the animation:

Conclusion

Although you probably won’t work with animations very often, it’s good to know what tools are available when you need them.

Thank-you for your time; I hope you learned something!