Edit on
<div class="container">
  <div class="col-xs-12">
    <h1>Please scroll ↓↓↓</h1>
    <p class="ani-bounce">
      bounce
    </p>
    <p class="ani-pulse">
      pulse
    </p>
    <p class="ani-swing">
      swing
    </p>
    <p class="ani-fadeIn">
      fadeIn
    </p>
  </div>
</div>
h1{
  margin-bottom: 800px;
}

p{
  font-size: 24px;
  text-align:center;
  padding: 60px 30px;
  margin: 90px 180px;
  border: 5px solid #CCCCCC;
  background-color:#FFFFFF;
}
function animate($ani,$valPos){

	if($ani === 'fadeIn'){
		$(".ani-"+ $ani).css("opacity","0");	
	}

	$(".ani-"+ $ani).each(function(){

		var imgPos = $(this).offset().top;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();

		if (scroll > imgPos - windowHeight + windowHeight/$valPos){
			$(this).addClass("animated "+ $ani);
		} else {
			$(this).removeClass("animated "+ $ani);
		}

	});

}

jQuery(window).on('touchstart scroll', function(){

	//timerID;
	var timer = false;

	if (timer !== false) {
		clearTimeout(timer);
	}

	timer = setTimeout(function() {

		animate('bounce','3');
		animate('fadeIn','7');
		animate('pulse','5');
		animate('swing','5');

	}, 100);

});
Rerun