How To Restart a CSS Animation With JavaScript

By using a DOM reflow/layout event

Charis Theodoulou
Apr 4, 2019 · 4 min read
Image for post
Image for post
Restarting an animation, unfortunately, is not as easy as I thought by adding and removing classes

Complex CSS animations can be a pain in the neck as there is no real way of debugging them and, if you have ever mixed them with some JavaScript special sauce, you have surely been in my place.

Yes, that frustrating place where no developer wants to go. To have absolutely no idea how to fix it after trying everything with long hours of researching and debugging.

If you are reading this, you are a web developer and you know what I mean. But worry no more my friend! In this article, I will show you a simple fix to use and properly restart a CSS animation, so your cool animations stay cool.

But first, let me ask you a couple of questions to make sure you are reading the right article and not wasting your time.

Are You:

  • Trying to synchronize CSS animations on various elements?
  • Restarting an animation on a user event? (Restarting a button animation on mouse-hover.)

If you answered “yes” to at least one of them, this article is for you and, hopefully, you will find it useful.

So, after having been in that horrible situation a number of times, my drive for curiosity and determination to end those never-ending times of staring at a screen, I have gathered a few possible fixes for properly restarting an animation.

However, I will present you with the simplest and easiest one to add to your code. Without further ado, let’s get right into it.

Removing and Adding the Class Won’t Do the Trick

Removing and adding the class won’t do the trick. Sorry.

But you were close! So close indeed, that you are missing only a single magic line of code.

void element.offsetWidth;

However, to understand why this line will fix the issue, we will first have to make sure we know what a DOM reflow or layout is.

The DOM Reflow

Simply put, the DOM reflow is a user-blocking operation that computes the layout of the document. A reflow on an element is the calculation of its dimensions and position in the document.

There are many ways in which you can trigger a DOM reflow operation in the browser. For an exhaustive list, check out this gist.

For the sake of simplicity, I will show you only one way but feel free to choose anything that is most suitable for your needs.

Performance Danger

And here comes great responsibility! Bear in mind that the DOM reflow can be an expensive operation, requiring a lot of CPU power and, because it is a blocking operation, it can cause unwanted, bad user experience.

Make sure that you minimize reflow/layout events throughout your website. Knowing more about it and knowing how to control it will make you a true dev ninja.

Now, back to my point. What makes reflow useful for restarting CSS animations is the process during this calculation, which updates the properties of the elements in the DOM and they are then reinitialized.

Meaning, the animation will run again like it’s the first time the animated element has been rendered.

Cool! Now let’s see how and when we can trigger a reflow event inside our JavaScript code.

Triggering a DOM Reflow

We can simply trigger a DOM reflow by requesting the element’s width or height:

Why void? Because we don’t care about the returned value, we just want to request the element’s dimensions which will trigger a reflow event.

Restarting a CSS Animation

For properly restarting your CSS animation, you would ideally like to trigger a reflow event between removing and adding your CSS classes triggering the animation, as shown below:

Vanilla JavaScript

jQuery

This instructs the browser to recalculate an element’s width, thus causing a reflow in the DOM. The reflow event triggers the animation to run from the start.

I would recommend triggering the reflow as low in the tree as possible to minimize subsequent reflows that might be triggered on children elements.

Conclusion

I hope you had a great read and found the fix you were looking for. Let me know if this was useful to you and any other cool ways you are using to fix this issue.

I barely touched the DOM reflow/layout thing, so if you are interested in learning more about how to minimize it check out my other article, Web Performance: Minimising DOM Reflow/Layout Thrashing

Have a good day!

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Charis Theodoulou

Written by

Web Performance & PWA 👨‍💻| pwa.recipes 🍲| pwa.js.org 📚| footy ⚽| cars & racing 🏎️| charistheo.io 🌐

Better Programming

Advice for programmers.

Charis Theodoulou

Written by

Web Performance & PWA 👨‍💻| pwa.recipes 🍲| pwa.js.org 📚| footy ⚽| cars & racing 🏎️| charistheo.io 🌐

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store