skip visible items from animating using JS

Question

I'm using waypoints to have fadeIn animation when the user scrolled down, and it worked. But as you can see, during the onload, there's a fadeIn too for the first few visible items.

How to not to have that? since I binded all .card to way[point.

My js

$(function() {

var waypoints = $('.card').waypoint(function (direction) {
                        $(this).addClass("animated fadeIn");


            }, {
                offset: '90%'
            });

});

DEMO : http://jsfiddle.net/ghx49d7x/

Answer 1

Not sure if its exactly what you want, but you can add a variable to indicate if the page has loaded or not and only add fadeIn if it has:

$(function () {
    var pageLoaded = false;
    var waypoints = $('.card').waypoint(function (direction) {
        $(this).addClass("animated"
            + (pageLoaded ? " fadeIn" : ""));
    }, {
        offset: '90%'
    });
    pageLoaded = true;
});

Updated Fiddle: http://jsfiddle.net/ghx49d7x/3/