CSS Animation Libraries

I’m willing to use only CSS animations, no JS. It’s a common to do just that, CSS3 for animations and a very small JS just for triggering start of an animation when element enters viewing area by scrolling.

Animate.css + some tiny JS

As for CSS3-only animation libraries, the best one is Animate.css. You just need to use JavaScript and calculate the scroll position, then add the animation class you want the element to have. That can also be done in plain-JS: Animate elements when scrolled into view

• AIV - Animate In View is small JS library that only changes CSS class when element condition is triggered. Can be easily used with Animate.css or anything else CSS. I like it because is so versatile for me also

• WOW.js is exactly that, Animate.css and JS combo that just works. Besides AOS, it is the most popular solution out there.

AOS

AOS is already a CSS + JS combo, and seems to be the most popular. Stated somewhere: every aspect of animation is handled by CSS. JS is only for triggering.

Oxygen Builder is using AOS to animate their “On-Scroll Effects”.

The idea behind AOS is straightforward: watch all elements and their positions based on settings you provide them. Then add/remove the class “aos-animate”.

More about library: https://css-tricks.com/aos-css-driven-scroll-animation-library/

Others

• There is also amazing ScrollMagic

… and many others