Detect the End of Transition and Animation with the Help of JavaScript

After the introduction of the CSS3, we got a lot of new features including the transition and animation properties. With this two now we can make more complex animations with just CSS. We can bravely say that the CSS animation made a great process and now we can make some elegant interaction on our sites or applications.

But sometimes the CSS part of the animation is simply not enough. We want to solve some more complicated stuff, and we have to detect the transition or animation state in JavaScript to react to it like with a callback, this can be a problem.

Note that before the Web Animations API there wasn’t any high-level animation API in JavaScript (unfortunately today this is poorly supported in some browsers) so we must use CSS animation which means property value definition or class switching.

One of the ways to make some callback is to use a timeout with the transition or animation interval when switching the class or the state. We know that this is not the best solution because of the browser’s optimized working processes.

At this point, we can call for help the transtionend and animationend event. This two event is like the click or hover ones, but it is triggered when a CSS animation or transition arrived at the end of the actual cycle. You set your animation like you always do, also configure the JavaScript part (add, remove classes on different interactions) if needed, and after these, you also add a new event listener to the element when the animation end is triggered.

Transitionend and Animationend

Depending on what type of animation method you use you have to use the correct event, this is self-evident. There is one pitfall, in the different browsers you might need different suffix (yep, this is prefixed, it is annoying in CSS, but it is more annoying in JS). There exist two simple helpers (from David Walsh) which help you identify the correct event name, the first is the transitionend and the second is the animationend.

Catch the Transitionend – Example

As you see in the below Pen, we made a simple element which toggles a class by click, but after the end, we also remove that class, so the item returns to the start position. With the use of transitionend, we can correctly catch the right moment for the class remove. Note that we removed the transitionend event listener after the event triggered so the next time it doesn’t duplicate.

See the Pen transitionend Vanilla JavaScript by Adam Laki (@adamlaki) on CodePen.

Catch the Animationend – example

In this case, we simply made a simple display animation to show an item. We used keyframe, and in the JS we used the whichAnimationEvent() helper function, and we registered the animationend event directly to the element.

See the Pen animationend Vanilla JavaScript by Adam Laki (@adamlaki) on CodePen.

Closing remarks

Nice to know that you won’t use this technique in your normal development, but it can be suitable. I developed a simple off-canvas navigation in the past days, and for the overlay, I had to catch the end of the opening animation so for me in that project it was a life saver. Of course there a lot of good JS library like the GSAP which is dropping this problem but on a smaller project for one particular problem I’m not sure you need a full library.

Keep in mind this excellent technique, and in the next time, it can be handy!

Special thanks for the following recource(s): Designed by Newelement / Freepik