Wow.js is a very light-weight Javascript library for automatically showing simple animations on page scroll.
Most of the time it works perfectly without issue, but today I ran into a curious issue where I couldn’t get it to trigger when an element that should have animated was initially hidden and then became visible or “revealed” (via it’s parent element having display:none or something similar and then becoming visible). In fact, where the element should have shown up and animated, there was just a white empty space.
There are a few threads related to this problem, such as this open issue, but I couldn’t quite get any of the solutions listed to work for me, and was having trouble finding docs on the internals of wow.js.
However, after just a little digging, I was able to find some easy ways around this. For pretty much all of these solutions, make sure that you have a window level variable pointing to your WOW instance, like this:
// wow.js init
window.wow = new WOW({
// settings here
});
wow.init();
Easiest solution:
The easiest solution is to simply call “wow.show(element)”, where element is the element that needs to be animated.
wow.show(element);
// Get all expandable cards
$('div.card > .card-reveal').parent().each(function(index){
var card = this;
// Attach listener to all activator triggers
$(card).find('.activator').on('click',function(){
$(card).find('.card-reveal .wow').each(function(){
wow.show(this);
});
});
});
Force re-animation regardless of scroll:
Finally, if you need to “reanimate” an element, regardless of scroll position, you will want to use this code, since by default WOW will not trigger an animation more times than once, and not more iterations than specified by “data-wow-iteration”.
function forceWowReanimation(element){
element.classList.remove('animated');
element.style.removeProperty('animation-iteration-count');
element.style.removeProperty('animation-delay');
element.style.removeProperty('animation-iteration-count');
element.style.removeProperty('animation-name');
wow.applyStyle(element,true);
setTimeout(function(){
wow.show(element);
},10);
}
The setTimeout in the above code is normally something I would try to avoid, but in this case it is necessary because wow.show sets visibility to “visible” regardless of arguments, so if I don’t give a delay between applyStyle (which sets visible to “hidden”) and .show(), the animation will not trigger.