JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<div id="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

CSS

#container
{
   white-space: nowrap;
}
.item
{
    width:500px;
    height:250px;
    background:red;
    color:#fff;
    display:inline-block;
    opacity:.2;
}
.item.show
{
    opacity:1;
}

JavaScript

$(function() {
    
    $(".item").each(function(){
    
       $(this).waypoint(function() {
         $(this).addClass('show');
         }, {
           offset: '100%',
           horizontal: true
         });
         
     });    
         
    });