CODEWITHSUNDEEP
jqueryhtmlcss-animationsanimate.csswow.js
Chico3001
Chico3001

Reputation: 1963

animation wont show hidden blocks

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:

Upvotes: 4

Views: 136

Answers (1)

Clayton Leis
Clayton Leis

Reputation: 1298

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/

Upvotes: 2

Related Questions