AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down.
By setting data-aos-* attributes on your HTML elements, you can define which animation to use, what timing to use, etc.
<div class="some-item" data-aos="fade" data-aos-duration="500">Example Element</div>
See the Pen AOS – animations by Snik (@michalsnik) on CodePen.
Don’t want to include AOS entirely? Only want to know the essence of how stuff like this works? Then check out the Scroll Animations pen I’ve built quite some time ago.