JSFiddle - React, Tailwind, and code Playground

by Alexander Wigmore

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<ul>
  <li class="animation-element">#1</li>
  <li class="animation-element">#2</li>
  <li class="animation-element">#3</li>
  <li class="animation-element">#4</li>
  <li class="animation-element">#5</li>
</ul>

CSS

.animation-element {
  text-align: center;
  color: white;
  background: #e3e3e3;
  width:100%;
  height: 500px;
  opacity: 0;
}

JavaScript

var $win = $(window);
var $stat = $('.animation-element'); // Change this to affect your desired element.

$win.on('scroll', function () {
    var scrollTop = $win.scrollTop();

    $stat.each(function () {
        var $self = $(this);
        var prev=$self.offset();
      	console.log(scrollTop);
        console.log(prev.top);
        if ( (scrollTop - prev.top) > -300) {
          $self.css('opacity', '1').addClass('animated fadeInLeft ');
        } else {
          console.log('n');
        }
   
    });

}).scroll();