JSFiddle - React, Tailwind, and code Playground

HTML

<div id="info">
  <div class="info-box">Red</div>
  <div class="info-box">Blue</div>
  <div class="info-box">Green</div>
</div>

CSS

#info {
  padding: 300px 20%;
}

.info-box {
  border: 1px solid black;
  padding: 50px;
  background: #00f;
  color: #fff;
  display: inline-block;
  margin: 0 100px;
  transition: 1s;
  opacity: 0;
  transform: translateX(0px);
}

.info-box.fadeShow {
  opacity: 1;
  transform: translateX(150px);
}

JavaScript

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() {


  var $info_show = $('#info');

  $info_show.waypoint(function() {
    $('.info-box').addClass("fadeShow");
  }, {
    offset: 'bottom-in-view'
  });



});