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>

FLIP

<div data-aos=“flip”></div>

<div data-aos=“flip-In-X”></div>

<div data-aos=“flip-Out-X”></div>

<div data-aos=“flip-Out-Y”></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>

ROTATING

<div data-aos=“rotate-in”></div>

<div data-aos=“rotate-out”></div>

DIFFERENT SETTINGS EXAMPLES

<div data-aos=“fade-up”

data-aos-duration=“3000”>

</div>

<div data-aos=“fade-down”

data-aos-easing=“linear”

data-aos-duration=“1500”>

</div>

<div data-aos=“fade-right”

data-aos-offset=“300”

data-aos-easing=“ease-in-sine”>

</div>

<div data-aos=“fade-left”

data-aos-easing=“ease-out-cubic”

data-aos-duration=“2000”>

</div>

ANCHOR PLACEMENT

<div data-aos=“fade-up”

data-aos-anchor-placement=“top-bottom”>

</div>

<div data-aos=“fade-up”

data-aos-anchor-placement=“center-bottom”>

</div>

<div data-aos=“fade-up”

data-aos-anchor-placement=“bottom-bottom”>

</div>