WOW
WOW copied to clipboard
matthieua
Callback when an animation end
This would be a useful feature. Actually the only callback that exists is for the beginning of animation, no for the end of it :(
@MarsZone @fpernia Capturing the end of an CSS transition/animation must either be through transitionend or animationend events (sometimes with vendor prefix) or by calculating the duration explicitly and using setTimeout().
The events were a little unreliable in my testing, sometimes not triggering at all, so for a similar library I chose to calculate the animation duration explicitly for use with setTimeout()—which has the added benefit of being easily cancelable, and also plays nice with two-way transitions.
However, since WOW only plays animations once, I’ve put together a working demo showing how you might achieve this in your project:
function afterReveal (el) {
el.addEventListener('animationend', function () {
console.log('This runs once finished!');
});
}
new WOW({ callback: afterReveal }).init();
Working Demo: http://jsbin.com/latujutefo/edit?html,js,console,output
For a production solution, I would recommend reading about detecting vendor prefixes to make ensure your code uses the correct event name.
Hope this helps! :bow:
@jlmakes great response! Thank you so much for that excellent explanation! :)
+1
@jlmakes Thanks a lot. BTW, how can I use it for a specific element? It triggers now for all the elements on the page right now.
@nomiDesigns You can wrap the whole thing in an if statement, so it only applies to specific elements. For example, let’s say your specific elements have the class .trigger on them, e.g:
function afterReveal (el) {
if (el.classList.contains('trigger')) {
el.addEventListener('animationend', function () {
console.log('This runs once finished!');
});
}
}
I don‘t have a working example, but hopefully the idea was clear.
Hi!
I need to pass an extra parameter in this callback ... How can I do it?
My code:
tl = new TimelineMax();
new WOW({ callback: afterReveal }).init();
function afterReveal( el ) {
if (el.classList.contains('trigger')) {
tl
.add(animateSlide1(), "slide1")
.play();
}
}
Thanks @jlmakes, it worked like a charm :) for creators: best thing would be to add a class-name once the Wow.js transition has finished. please add it.
