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.
All you have to do is to add
data-aos attribute to html element, like so:
Script will trigger "animation_name" animation on this element, if you scroll to it.
You can set following settings to your elements.
||Change offset to trigger animations sooner or later (px)||200||120|
||*Duration of animation (ms)||600||400|
||Choose timing function to ease elements in different ways||ease-in-sine||ease|
||Delay animation (ms)||300||0|
||Anchor element, whose offset will be counted to trigger animation instead of actual elements offset||#selector||null|
||Anchor placement - which one position of element on the screen should trigger animation||top-center||top-bottom|
||Choose wheter animation should fire once, or every time you scroll up/down to element||true||false|
*Duration accept values from 50 to 3000, with step 50ms, it's because duration of animation is handled by css, and to not make css longer than it is already I created implementations only in this range. I think this should be good for almost all cases.
Read more description in the official documentation.
There are serveral predefined animations you can use already: