#

Animations

Aenean lacinia bibendum nulla sed consectetur

Fade

<div data-aos="fade"></div>
<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>

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-anchor="#example-anchor"

     data-aos-offset="500"

     data-aos-duration="500">

</div>
<div data-aos="fade-zoom-in"

     data-aos-easing="ease-in-back"

     data-aos-delay="300"

     data-aos-offset="0">

</div>
<div data-aos="flip-left"

     data-aos-easing="ease-out-cubic"

     data-aos-duration="2000">

</div>