JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mcography.com/tally/js/velocity/velocity.min.js"></script>
<script src="http://mcography.com/tally/js/velocity/velocity.ui.js"></script>
<script src="http://mcography.com/tally/js/jquery.inview.js"></script>
<div class="title">
	    <div class="row">
	      <div class="large-12 columns">
	        <h1 class="movies-title plunk wow fadeInDown">This section is for Movies.</h1>
	      </div>
	    </div>
	</div>
    
    <div class="title">
	    <div class="row">
	      <div class="large-12 columns">
	        <h1 class="tv-title plunk wow fadeInDown">This section is for Television.</h1>
	      </div>
	    </div>
    </div>
    
    <div class="title">
	    <div class="row">
	      <div class="large-12 columns">
	        <h1 class="books-title plunk wow fadeInDown">This section is for Books.</h1>
	      </div>
	    </div>
    </div>

	<div class="title">
	    <div class="row">
	      <div class="large-12 columns">
	        <h1 class="music-title plunk wow fadeInDown">This section is for Music.</h1>
	      </div>
	    </div>
	</div>

CSS

h1 {
    font-size: 72px;
}

JavaScript

$('body').delegate('.title', 'inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    // element is now visible in the viewport
    if (visiblePartY == 'top') {
      // top part of element is visible
    } else if (visiblePartY == 'bottom') {
      // bottom part of element is visible
    } else {
      // whole part of element is visible
      $(this).velocity("transition.slideDownIn", 500);      
    }
  } else {
    // element has gone out of viewport
    $(this).velocity("reverse");
  }
});