Edit in JSFiddle

$(document).ready(function() {
  $('#red').css('opacity', 0);
  $('#red').waypoint(function() {
    $('#red').addClass('fadeInLeft');
  }, {
    offset: '50%'
  });
});

<div id="blue"></div>
<div style="height:2000px"></div>
<div id="red" class="animated"></div>
<div style="height:2000px"></div>
<div id="yellow"></div>

	#blue {
	  width: 200px;
	  height: 100px;
	  background-color: blue;
	}
	
	#red {
	  width: 200px;
	  height: 100px;
	  background-color: red;
	}
	
	#yellow {
	  width: 200px;
	  height: 100px;
	  background-color: yellow;
	}