How to set an event listener for the animation end event

Instead of setting a time out, I want to set an event listener for the animation end event.

Where the function will be executed as soon as the animation completes without needing the extra timer.

To do that, I found this: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

But I don’t know how that would be written into my code. https://jsfiddle.net/7yn9ofk8/

As I understand it, I need to add an event listener to the body and listen for animationend , inside the callback run the code I am running inside setTimeout .

How would that be added to the code?

The fadeOut occurs after clicking the Exit button, which can be seen after clicking the play svg.

CSS

.fadingOut:before,
.fadingOut .isOpen {
  animation: fadingOut 1s;
}

@keyframes fadingOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

Javascript

  function resetPage() {
    document.querySelector("body").classList.add("fadingOut");
    setTimeout(function() {

      document.querySelector("body").classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
    }, 1000);
  }

Hi,
you put the event listener directly on the element with the event:

<div id="wrapper" class="">
<div class="animated">
Fading Element
</div>
</div>
const wrapper = document.getElementById('wrapper');
const animatedEl = document.querySelector('.animated');
const resetElement = () => { wrapper.classList.remove('fadingOut'); }
animatedEl.addEventListener('animationend', resetElement);