wow.js happens only when scroll down once - css

Question

I'm using wow.js, and it works only on page load and one time when scroll,
I would like it to trigger each time when I scroll to the div position and not only once when page is load.
<div class="wow rotateIn animated" data-wow-delay="0.3s" data-wow-duration="0.5s"></div>

Answer 1

Try this
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
.box {
display: block;
width: 200px;
background: rgba(255, 255, 255, 0.7);
color: #eb3980;
font-family: "Comic Sans MS", "Comic Sans";
border: 3px dashed pink;
margin: 30px auto;
text-align: center;
}
.doge {
display: block;
width: 200px;
height: 200px;
position: fixed;
bottom: 10px;
right: 10px;
background: url(http://mynameismatthieu.com/WOW/img/wow-8.gif) no-repeat;
}
body {
background: url(http://mynameismatthieu.com/WOW/img/wow-logo.jpg) #fff fixed no-repeat center center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<div class="box">
<h1 class="wow slideInLeft">Hello</h1>
<h1 class="wow slideInRight">World</h1>
<h2>🤗 🌎 </h2>
</div>
<div class="doge wow bounceIn"></div>
<!-- First load wow.js and other libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<!-- scrollSpy plugin see https://github.com/thesmart/jquery-scrollspy -->
<script src="https://gitcdn.xyz/repo/thesmart/jquery-scrollspy/0.1.3/scrollspy.js"></script>
<!-- Modify after -->
<script>
</script>

Answer 2

WowJs not provide functionality every time scroll animation is apply. In WowJs Animation apply once's when first time you scroll page. if you want to apply that type of functionality instead of WowJs you can used ScrollRevealJs library. ScrollRevealJs have reset option that provide every time you scroll page animation is apply.
Refer this link :- http://scrollrevealjs.org/

Answer 3

try this
window.addEventListener('scroll', function(e) {
if( $(window).scrollTop() <= 50) {
$('.wow').removeClass('animated');
$('.wow').removeAttr('style');
new WOW().init();
}
});