Wow.js not taking two classes for an element at different time intervals

Question

I have an image element, on which I want to apply two animation classes, one on the arrival and one on some fixed time.

For Example, on arrival i want a fadeIn effect. So i do this:

img.classList.add("wow");
img.classList.add("fadeIn");

I again want to add a heartbeat effect on the same image after some time. So i tried something like this:

setTimeout(function () {
    img.classList.remove("fadeIn");
    img.classList.add("heartBeat");
},3000);

This is not working, and the hearbeat effect is not seen.

Note:

On the other hand, if I don't initially set up the fadeIn effect to the image, then the image does take the heartbeat effect after 3000ms.

So a standalone code like this one, is working perfectly fine.

setTimeout(function () {
    img.classList.add("heartBeat");
},3000);

I am not being able to figure out the cause of this problem.

Answer 1

You can cuse the function inside the callback of the WOW instance.

According to the wow.js docs, it is fired every time an animation is started and the "the argument that is passed in is the DOM node being animated" (box, but in this case I'm directly using the img variable).

So, when it is triggered, we can immediately remove the .fadeIn class, which will not affect the animation because it was added inline with JavaScript. In addition, after 3 seconds, we remove the style attribute (that caused the "fade in" animation) and add the .heartBeat class that will trigger the next heartbeat animation.

img.classList.add("wow");
img.classList.add("fadeIn");

new WOW({
  callback: function(box) {
    img.classList.remove("fadeIn");
    setTimeout(function () {
      img.removeAttribute("style");
      img.classList.add("heartBeat");
    },3000);
  }
}).init();