Wow js is not working with the Fullpage JS

Question

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);
});

Answer 1

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.