AOS
Animate On Scroll Library
Scroll down
Fade
<div data-aos="fade-up"></div>
<div data-aos="fade-down"></div>
<div data-aos="fade-right"></div>
<div data-aos="fade-left"></div>
<div data-aos="fade-up-right"></div>
<div data-aos="fade-up-left"></div>
<div data-aos="fade-down-right"></div>
<div data-aos="fade-down-left"></div>
FLIP
<div data-aos="flip-left"></div>
<div data-aos="flip-right"></div>
<div data-aos="flip-up"></div>
<div data-aos="flip-down"></div>
ZOOM
<div data-aos="zoom-in"></div>
<div data-aos="zoom-in-up"></div>
<div data-aos="zoom-in-down"></div>
<div data-aos="zoom-in-left"></div>
<div data-aos="zoom-in-right"></div>
<div data-aos="zoom-out"></div>
<div data-aos="zoom-out-up"></div>
<div data-aos="zoom-out-down"></div>
<div data-aos="zoom-out-right"></div>
<div data-aos="zoom-out-left"></div>
Edit on Hunch

About

This page is a clone of AOS gh-page, under MIT license.

Use AOS on Hunch

Add the following HTML to the Custom HTML panel, before </head>

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Add the following HTML to the Custom HTML panel, before </body>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>

In Config panel, set data-aos=fade-up to an element, use Preview mode to see the animation.