JSFiddle - React, Tailwind, and code Playground

by Raúl Rojas

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi magna, ultrices non suscipit ut, tristique nec nulla. Ut sed fringilla nisi. In diam erat, vehicula vitae urna eu, ornare hendrerit dolor. Mauris facilisis sit amet turpis sit amet semper. Pellentesque rutrum, enim quis sollicitudin mollis, massa velit sodales diam,</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi magna, ultrices non suscipit ut, tristique nec nulla. Ut sed fringilla nisi. In diam erat, vehicula vitae urna eu, ornare hendrerit dolor. Mauris facilisis sit amet turpis sit amet semper. Pellentesque rutrum, enim quis sollicitudin mollis, massa velit sodales diam,</p>

<p id="try">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisi magna, ultrices non suscipit ut, tristique nec nulla. Ut sed fringilla nisi. In diam erat, vehicula vitae urna eu, ornare hendrerit dolor. Mauris facilisis sit amet turpis sit amet semper. Pellentesque...

CSS

body {
  padding: 15px;
}
.modal-body {
	overflow-y: scroll;
	max-height: 400px;
}

JavaScript

$('#myModal').on('show.bs.modal', function () {

    $(".modal-body").unbind("scroll");

    $(".modal-body").scroll(function(){
        var mScroll = $(this).scrollTop();
        
        $('.modal-body p').each(function(){
        var eTop = $(this).offset().top - 50;
         
          if(eTop <=  mScroll) {
            $(this).addClass('animated zoomIn');
          }

        });
    });
});