JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="wrapper">
  <div class="box"></div>
</div>

CSS

.wrapper{
  width: 100%;
  height: 1000px;
}
.box{
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  border: 1px solid #000;
  position: absolute;
  top: 500px;
  display: none;
  animation-duration: 5s;
}

JavaScript

$(document).ready(function(){
$(document).scroll(function(evt){
	if($(this).scrollTop() >= $('.box').position().top - $(window).height()/2+20){
  $('.box').css({display: 'block'});
  	$('.box').addClass('animated flip')
  }
});
});