0

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);
});
Globiz Design
  • 13
  • 4

1 Answers1

0

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.

Alvaro
  • 40,778
  • 30
  • 164
  • 336