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="400"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="600"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="800"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="1000"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="1200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="1400"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="1600"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="1800"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="2000"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="2200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="2400"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="2600"></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 = [];

  function processItemQueue() {
      if (itemQueue.length) {
        var $firstinque = $(itemQueue.shift());
        var $animation = $firstinque.attr('data-effect');
        $firstinque.addClass($animation);
      } 
    
  }

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