I am working on a project with wow.js. Lately I realized there is a possible 'bug' in the animation when its firing with some delay. Firstly I have added class="wow animate animate__bounceInUp" data-wow-duration="2s" and it's working flowless. But when I realized that I need to add a delay to the animation, then firstly it flickers one time and then running the animation. I have added the working snippet here. Can anyone look in to this and tell me what I am missing here?
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-img container">
<div class="row text-center">
<div class="col-xs-4">
<img src="https://wowjs.uk/img/wow-1.gif" alt="" class="wow animate animate__bounceInUp" data-wow-duration="2s" data-wow-delay="0.2s">
</div>
<div class="col-xs-4">
<img src="https://wowjs.uk/img/wow-1.gif" alt="" class="wow animate animate__bounceInUp" data-wow-duration="2s" data-wow-delay="0.4s">
</div>
<div class="col-xs-4">
<img src="https://wowjs.uk/img/wow-1.gif" alt="" class="wow animate animate__bounceInUp" data-wow-duration="2s" data-wow-delay="0.6s" >
</div>
</div>
</div>