I need help detecting the section is in viewport or not. If the section reaches in viewport I need to add a class using Javascript or jQuery. So that I can add animation to the added class and use CSS @keyframes animations and make it looks nice when the page gets scrolled.
.site-wrap {
max-width: 700px;
margin: 0 auto;
padding: 0 2rem;
}
section {
margin-bottom: 1rem;
padding: 4rem;
background: white;
border-radius: 8px;
box-shadow: 0px 0px 0 1px rgba(32, 71, 84, 0.03), 0px 0px 0 3px rgba(32, 71, 84, 0.02);
}<div class="site-wrap">
<section>
<h1>Scroll on down</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est.
Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo
sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis
voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure
natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione.
Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque
optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p>
</section>
<section>
<h1>Keep scrolling</h1>
<p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni,
ut, dignissimos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero
ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam!
Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
</section>
<section>
<h1>The end</h1>
<p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem
dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora
in aspernatur pariaturlores sunt esse magni, ut, dignissimos.</p>
<p>Adipisicing elit. Tempore tempora rerum.</p>
</section>
</div>