wow.js and fullpage.js animation firing on BOTH scroll into / out of viewport

Question

I have an issue with Wow.js and Fullpage.js. I've managed to get them working together, here is the script:

$(document).ready(function() {
  $('#fullpage').fullpage({
    'navigation': true,
    'navigationPosition': 'right',
    scrollBar: true,
    onLeave: function() {
      new WOW().init();
    }
  });
  //methods
  $.fn.fullpage.setAllowScrolling(true);
});

<img class="portfolio-image wow animated fadeInLeft" data-wow-iteration="1">

I have the data iteration set to 1, which prevents it from repeating.

Here is the site where you can see the effect in action lancewalkerdesign.com

However, when i scroll into one of my viewports (each section on my front page is a full screen section with ul nav dots.) the animation fires. When I scroll down, the animation fires AGAIN as the scroller scrolls to the next section.

I would prefer to only see this animation once upon entering the viewport, whether scrolling down or up into it, not again as it's leaving.

Any ideas?

Answer 1

Why do you initialise wow in the onLeave callback? You probably only have to do it once on page load.

Try initialising it only once in the afterRender callback:

$(document).ready(function() {
  $('#fullpage').fullpage({
    navigation: true,
    navigationPosition: 'right',
    scrollBar: true,
    afterRender: function() {
      new WOW().init();
    }
  });
  //methods
  $.fn.fullpage.setAllowScrolling(true);
});