Good day! I use a bunch of animate.css + wow.js. And there is such a problem - if you reload the page in the scrolled state, for example, to the middle, then after reloading, scrolling up wow.js also works. I need to make it so that in the scanned page, wow.js worked only when scrolling down, and when scrolling up it did not work and all elements were already loaded without animation. How can I do that? In the documentation, Wow did not find this feature.

Or advise libraries similar to Wow.js, which have such a function.

Connection code Wow.js

initWow_scroll: function(){ var main = this; var wow = new WOW( { offset: 0, // distance to the element when triggering the animation (default is 0) callback: function(box) { // the callback is fired every time an animation is started // the argument that is passed in is the DOM node being animated }, scrollContainer: null // optional scroll container selector, otherwise use window } ); wow.init(); return main; }

    1 answer 1

    Attach the source code next time. javascript example:

     // 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') } });

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

    • Added code above - Make_dev