JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<div id="container">
 <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end -->
 <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="500"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!--...

CSS

#container {
  margin-right: -15px;
}

.item {
  width: 10%;
  display: block;
  float: left;
  padding-right: 15px;
  box-sizing: border-box;
}

.item-in {
  margin-top: 15px;
  margin-bottom: 100px;
  display: block;
  height: 350px;
  background: green;
}

.item-animate {
  opacity: 0;
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3s ease-in;
}

.item-animate.show {
  opacity: 1;
}

JavaScript

$(function() {
  var itemQueue = [];
  var queueTimer;

  function processItemQueue() {
    var $delay = 100;
    if (queueTimer) {
      return;
    }

    queueTimer = window.setInterval(function() {
      if (itemQueue.length) {
        var $firstinque = $(itemQueue.shift());
        var $animation = $firstinque.attr('data-effect');

        $firstinque.addClass($animation);

      } else {
        window.clearInterval(queueTimer);
        queueTimer = null;
      }
    }, $delay);
  }

  $(".item-animate").waypoint(function() {
    itemQueue.push(this.element);
    processItemQueue();
  }, {
    offset: '90%'
  })
})