I have a problem with Javascript. I am using animate.css to animate some of the elements of the website. However, it won't animate properly once it is repeated. I tried several solutions including resetting the const where the animation runs, but to no avail. Can anyone help me? I know this is simple but I can't find the problem here. refreshing the site is one solution but it is my last resort.
Here is the code for animating the elements:
const animateCSS = (element, animation, prefix = 'animate__') =>
// We create a Promise and return it
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// When the animation ends, we clean the classes and resolve the Promise
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});
and here is the code for triggering the animation
animateCSS('.wrapper1', 'bounceOutDown');
I placed the trigger on a button and once it is clicked, it will trigger. another button is used to trigger the same thing but with different animations (Fade in and Fade out). however, the problem starts when you repeat it again. The link below is the demonstration.
https://swiftybear.github.io/MarlouRentucan/
If you're interested, here is the full code repository, Thank you!:
You have to make sure that the element you are going to animate is ready for it, I mean you have to clear previous animation classes before you can add new,
animationenddoesn't work properly, to be honest, especially when you are repeatedly animating an element.Solution :
Alternate :
You can use my library for your need, where I have defined a function called
aniUtil_flush()to flush out all the animation classes.Sample code -
Don't get confused with the keywords used, that is how the library works, more info
Demo - here