<main>
<div class="will-fadeIn">
  <p>foo bar</p>
</div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
</main>
body {
  text-align: center;
  color: #676767;
  overflow-x:hidden;
}

p {
  font-size: 13px;
  margin: 15px auto;
}


.will-fadeIn {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 20px auto;
  height: 250px;
  background-color: #b7f7f7;
  padding: 10px;
}
.will-fadeIn:nth-child(odd) {
  background: #ffeded;
}
.will-fadeIn:first-child {
  height: auto;
  background-color: #edffff;
}

.fadeInRight {
  animation: fadeInRight .5s ease .4s both;
}
@media (prefers-reduced-motion) {
  .fadeInRight .animated {
    animation: unset !important;
    transition: none !important;
  }
}

.fadeInLeft {
  animation: fadeInLeft .5s ease .4s both;
}
@media (prefers-reduced-motion) {
  .fadeInLeft .animated {
    animation: unset !important;
    transition: none !important;
  }
}



@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
function Utils() {}
Utils.prototype = {
  constructor: Utils,
  isElementInView: function(element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop + $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop + $(element).height();

    if (fullyInView === true) {
      return pageTop < elementTop && pageBottom > elementBottom;
    } else {
      return elementTop <= pageBottom && elementBottom >= pageTop;
    }
  }
};

var Utils = new Utils();
$(window).on("load", addFadeIn());

$(window).scroll(function() {
  addFadeIn(true);
});

function addFadeIn(repeat) {
  var classToFadeIn = ".will-fadeIn";

  $(classToFadeIn).each(function(index) {
    var isElementInView = Utils.isElementInView($(this), false);
    if (isElementInView) {
      if (!$(this).hasClass("fadeInRight") && !$(this).hasClass("fadeInLeft")) {
        if (index % 2 == 0) $(this).addClass("fadeInRight");
        else $(this).addClass("fadeInLeft");
      }
    } else if (repeat) {
      $(this).removeClass("fadeInRight");
      $(this).removeClass("fadeInLeft");
    }
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js