I'm adding the ZoomIn animation on the pageload on the image. But animation is not working due to FullpageJS.
Here is my code
HTML Code:
<div class="wow zoomIn" data-wow-duration="0.5s" data-wow-delay="0.2s">
<img src="images/image-3.jpg" alt="..." class="img-fluid">
</div>
JS Code:
$(function () {
new WOW().init();
});
$(document).ready(function () {
// Options
$('#fullpage').fullpage({
autoScrolling: true,
scrollHorizontally: true,
scrollingSpeed: 1300,
scrollOverflow: true,
navigation: true,
navigationPosition: 'right',
slidesNavigation: true,
afterRender: function () {
new WOW().init();
},
afterLoad: function () {
new WOW().init();
}
});
//methods
$.fn.fullpage.setAllowScrolling(true);
});
You'll need to use the fullpage.js option scrollBar:true
on its initialisation.
This way fullPage.js will scroll using a scroll bar which is what wow.js requires in order to fire the scroll event it uses to trigger animations.