How to add CSS animations on page scroll using jquery on the website?

Add animate.min.css in your <head>

How to add CSS animations on page scroll using jquery on the website?expoundsofttechsolution How to add CSS animations on page scroll using jquery on the website?

<link
    rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

Add jquery.waypoints.min.js and jquery.min.js in your closing <body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

HTML Code:

<section class="scroll_info_heading">The standard Lorem Ipsum passage</section>

Css Code:

.scroll_info_heading{
	opacity: 0;
}
.scroll_info_heading.animate__animated{
	opacity: 1;
	animation-duration: 2s;
}

Jquery Code:

$(document).ready(function(){
 $('.scroll_info_heading').waypoint(function(direction){
       $('.scroll_info_heading').addClass('animate__animated animate__fadeInDown')
        }, {
        offset: '50%'
    });
});