Wow.js repeat animation every time you scroll up or down

Question

I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back to the top i see again the animations like when you scroll down. I hope that I explained myself. I have already seen many websites that repeats the animations on theirs pages but unfortunately I don't remember them and I can't provide a link.

I have already tried this:

$(window).scroll(function(){
    new WOW().init();
}

But it repeat the animations also if you scroll a little and it's pretty ugly to see. I try to explain me better: I have a with my animation and if it is focused the animation is triggered, then i scroll down to another div and the previous div is no more visible(not in the window viewport), then again i scroll back to my div with animation and the animation is triggered again.

I'm sorry for this messy question but I really don't know how to explain it.

Thanks in advance!

Solution 1

This example by Benoît Boucart shows how the animation can be "reset" when the user scrolls out of view and back in. The key here is the second function that removes the animation css class when the element scrolls out of view. I wish WOW.js would implement this, but they've indicated that they don't plan to.

http://codepen.io/benske/pen/yJoqz

Snippet:

// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
  var $this     = $(this),
      offsetTop = $this.offset().top;

  if (scrolled + win_height_padded > offsetTop) {
    if ($this.data('timeout')) {
      window.setTimeout(function(){
        $this.addClass('animated ' + $this.data('animation'));
      }, parseInt($this.data('timeout'),10));
    } else {
      $this.addClass('animated ' + $this.data('animation'));
    }
  }
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
   var $this     = $(this),
       offsetTop = $this.offset().top;
   if (scrolled + win_height_padded < offsetTop) {
     $(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
   }
});

Solution 2

If a user wants to repeat the animation on both the events i.e.

• onScrollUp
• onScrollDown

then this will be a good solution for it:

First create an addBox function, it will help to push new elements into the WOW boxes array.

WOW.prototype.addBox = function(element){
    this.boxes.push(element);
};

Then use jQuery and scrollspy plugin that helps to detect which element is out of the view and then push WOW as:

$('.wow').on('scrollSpy:exit',function(){
    var element = $(this);
    element.css({
        'visibility' : 'hidden',
        'animation-name' : 'none'
    }).removeClass('animated');
    wow.addBox(this);
});

Solution Courtesy: ugurerkan

Solution 3

Answer by @vivekk is correct I m just adding a working example so that people can easily get this

see the Demo fiddle

         <script>
         // Repeat demo content
           var $body = $('body');
           var $box = $('.box');
          for (var i = 0; i < 20; i++) {
          $box.clone().appendTo($body);
            }

          // Helper function for add element box list in WOW
         WOW.prototype.addBox = function(element) {
         this.boxes.push(element);
        };

        // Init WOW.js and get instance
       var wow = new WOW();
       wow.init();

      // Attach scrollSpy to .wow elements for detect view exit events,
        // then reset elements and add again for animation
         $('.wow').on('scrollSpy:exit', function() {
        $(this).css({
         'visibility': 'hidden',
         'animation-name': 'none'
        }).removeClass('animated');
        wow.addBox(this);
       }).scrollSpy();

       </script>