4

I'm trying to make my own version of wow.js because of two reasons, the first is that it seems that wow.js is not longer maintained, and the second one because it only shows animations once

The problem that i have is that my code doesn't show the animations when scrolling downwards, only when scrolling upwards and i cand find why...

Can anyone help me to find the error?

The function in charge of showing the elements is this:

function showBlocks() {
    $('.wow2').each(function () {
        var elementTop = $(this).data('wow2-top');

        $(this).html(elementTop);

        // Shows Elements
        if ((elementTop >= top) && (elementTop <= bottom)) {
            $(this).css('visibility', 'visible');
            $(this).addClass('animated').addClass($(this).data('wow2-class'));
        }
        /*
         // Hides Elements
         if ((elementTop < top) || (elementTop >= bottom)) {
         $(this).css('visibility', 'hidden');
         $(this).removeClass('animated').removeClass($(this).data('wow2-class'));
         }
         */
    });

}

here is my jsfiddle:

scoa
  • 17,192
  • 4
  • 56
  • 75
Chico3001
  • 1,513
  • 1
  • 15
  • 32

1 Answers1

2

On scroll you're updating the value for top but not for bottom. Try

$(window).scroll(function () {
    top = $(window).scrollTop();
    bottom = top + viewportHeight;
    showBlocks();
    writePosition();
});

https://jsfiddle.net/5q7gryqr/4/

Clayton Leis
  • 1,228
  • 9
  • 19