Remysharp's js Inview plugin fired velocity transition twice

Question

I'm using the Remysharp In View plugin to determine when an element is in view. When it is in view, I use velocity to show that element in. For some reason, inside of the In view call, the animation triggers twice. Outside of the In View call, it works as it should.

Why is it firing twice?

$(".xslideUpIn").one('inview', function (event, visible) {
      if (visible == true) {
         $(".xslideUpIn").velocity('transition.slideUpIn', { stagger: 700 }).delay(1000)
      } else {
        // element has gone out of viewport
      }
});

Answer 1

try with

$(".xslideUpIn").one('inview', function (event, visible) {
  if (visible == true) {
     setTimeout(function() {
       $(".xslideUpIn").velocity('transition.slideUpIn', { stagger: 700 }).delay(1000)
     }, 0);
  } else {
    // element has gone out of viewport
  }
});