Infinite scroll without plugin using ajax

I've created an infinite scroll without using any plugin to achieve the objective. The problem is that the bootstrap masonry cards grid are loading all the posts cards at the first scroll or will load the grid in a wrong way until a scroll event occurs. I'm using the viewport checker jquery plugin that will work nice when the page where I've implemented this is loaded,it will add a fade in animation from the animate.css library, but on the appended elements it will not work and I need to add the class manually. I want to obtain a smooth fade in effect, is there any fix for this problem?

EDIT: Here is the code I'm using

script type="text/javascript"
(function($){

  $(document).ready(function(){

    if(!/Mobile|Android/.test(navigator.userAgent)){
      // improve load
    var pull_page = 1;
    var jsonFlag = true;
    $(document).scroll(function(e){
      e.preventDefault();
      if( $(window).scrollTop() +1 = $(document).height() - $(window).height()  jsonFlag){
          pull_page++;
          $.getJSON("/wp-json/portfolio/all-posts?page=" + pull_page, function(data){
            if(data.length = 6){
              $.each(data, function(i, item){
                var card = 'div class="card" id="page-portfolio-card"';
                card += 'a href="'+ item.permalink +'"';
                card += 'img class="card-img-top w-100" src="'+ item.featured_img_src +'" id="case-studies" /';
                card += 'div class="overlay"h4 class="text-center" id="client-name"'+ item.title +'/h4/div';
                card += '/a';
                card += '/div';
                $(card).hide();
                $('.card-columns').append(card);
                $(card).fadeIn('slow');
                //.find('.card-columns')
                //.append(html);
              });
            }
            else{
              jsonFlag = false;
            }
          })
          .done(function(data){
            if(data.length = 6){
              jsonFlag = true;

            }
            else{
              jsonFlag = false;
            }
          });
        }
      });
    }
    }); // document ready
  }(jQuery));
/script

Whit the code above, the cards are loaded all at the same time and no fadeInUp effect from animate.css is used. I need to fix this.