$(document).ready(function() {
$('#red').waypoint(function() {
$('#red').addClass('animate__fadeInLeft');
}, {
offset: '50%'
});
});
<div id="blue"></div>
<div style="height:2000px"></div>
<div id="red" class="animate__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;
}
External resources loaded into this fiddle: