WOW.js will only show animation one time on scrolling past it about wow HOT 19 CLOSED

Hey, have same issue then try MervelousM approach but failed because when init again wow it's reset every wow class element on my page. I need selective reset, so made some changes.
If you need something like that, here you are 😊

I created a addBox function, it's helps push new element WOW boxes array.

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

Then I used jquery and scrollspy plugin detect which element is out off view and then push WOW.

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

Here is the working example 🤗
https://jsfiddle.net/ugurerkan/53641ovn/

from wow.

Sorry Randall, we don't intend to implement this feature since it'd add some complexity to the plugin and we only want to trigger the animation once. Feel free to fork the project and customize for your needs.

from wow.

try to add this

window.addEventListener('scroll', function(e) {

            if( $(window).scrollTop() <= 50) {
                $('.wow').removeClass('animated');
                $('.wow').removeAttr('style');
                new WOW().init();
            }

});

from wow.

You could use something like this

if ($('.wow').hasClass('animated')) {
            $(this).removeClass('animated');
            $(this).removeAttr('style');
            new WOW().init();
}

on a certain event, for example I've used it when navigating through bootstrap tabs.

from wow.

@ugurerkan thanks a lot mate, you've just saved my day.
that's really great snippet, I was really wondering what will be the best solution and you've just provided already.
Thanks!

from wow.

Hey, have same issue then try MervelousM approach but failed because when init again wow it's reset every wow class element on my page. I need selective reset, so made some changes.
If you need something like that, here you are 😊

I created a addBox function, it's helps push new element WOW boxes array.

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

Then I used jquery and scrollspy plugin detect which element is out off view and then push WOW.

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

Here is the working example 🤗
https://jsfiddle.net/ugurerkan/53641ovn/

If you need a solution without the necessity of the jQuery addon scrollSpy and the scrollSpy:exit event. Here is my solution which is quite similar but it only depends on jQuery but still needs the addBox() function described above.

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

Additionally you have to check the viewport with the following function:

// credits @ https://stackoverflow.com/a/33979503/2379196
var isInViewport = function($container, offset) {
  var containerTop = $container.offset().top;
  var containerBottom = containerTop + $container.outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return containerBottom > viewportTop && containerTop + offset < viewportBottom;
};

Finally find the animation which are already triggered and require a reset:

var checkWOWJsReset = function() {  
  var resetWOWJsAnimation = function() {
    var $that = $(this);
		
    // only reset animation when no long in viewport and already animated (but not running)
    if (!isInViewport($that, 0) && $that.css('animation-name') != 'none' && !$that.hasClass('animated')) {
       $that.css({'visibility': 'hidden', 'animation-name': 'none'});
       wow.addBox(this);
    }
  };
  $('.wow').each(resetWOWJsAnimation); // check if reset is necessary for any elements (you might use a different selector here)
};
$(window).on('resize scroll', checkWOWJsReset);

from wow.

Thanks Ali-Alzantot...this is a really simple drop-in.

window.addEventListener('scroll', function(e) {
        if( $(window).scrollTop() <= 50) {
            $('.wow').removeClass('animated');
            $('.wow').removeAttr('style');
            new WOW().init();
        }
});

from wow.

If you want to explicitly trigger an animation for a certain element again. No need to call init() again and also not wanted:

var triggerAnimation = function(selector, animation) {
  var $element = $(selector);
  var element = $element[0];
  var newone = element.cloneNode(true);
  element.parentNode.replaceChild(newone, element);
	
  $element = $(selector);
  $element.addClass('wow ' + animation + ' animated');
  $element.attr('style', 'visibility: visible; animation-name: ' + animation + ';');
};

triggerAnimation('.your_selector, 'zoomIn'); // element to reanimate and animation

or if your use case requires to combine scroll reanimation with event animation:

var triggerAnimation = function(selector, animation) {
  var $element = $(selector);
  var applyAnimation = function(){
    $element = $(selector);
    $element.addClass('wow ' + animation + ' animated');
    $element.attr('style', 'visibility: visible; animation-name: ' + animation + ';');
  };

  // remove style and class, delay re-apply for 25ms
  if(!$element.hasClass('animated')) {
    $element.removeAttr('style');
    $element.removeClass('wow').removeClass(animation)
    setTimeout(applyAnimation, 25);
  }
};

triggerAnimation('.your_selector, 'zoomIn'); // element to reanimate and animation

from wow.

U could use this plugin: http://silvestreh.github.io/onScreen/

from wow.

You need to modify WOW object after wow.js loaded. @rjsnh1522
So, please check is that javascript file or script block which is placed these modifications loaded after wow.js file.

btw, created a working example here https://jsfiddle.net/ugurerkan/53641ovn/

from wow.

from wow.

+1

from wow.

Algo anda mal marca el siguiente error: ReferenceError: wow is not defined

from wow.

I am getting wow is not defined .. please help me to solve this issue.

from wow.

it's working thanks Ali-Alzantot 💯 % working

from wow.

i have used wow-animation delay and then wow-animation-duration and now i want animation to fade in or fade slowly as much as i want . so how can i set animation speed ???

from wow.

wow-animation-duration sets the speed of the animation...

from wow.

i want to show animation for list and problem is all my list contained in viewport.
Now when i load the page, all items animate at once, but i want the items to animate one after the other.

Note: need animation of items one after the other without depending on scroll.

from wow.

for users of Bootstrap carousel…
`
.on( 'slide.bs.carousel' , function() {
if( $( '.my-wow-element' ).hasClass( 'wow' ) ) {
$( this ).removeAttr( 'style' );'
new WOW().init();
}
// end
} )
'

from wow.