Fade
Fade up
<div data-aos="fade-up"></div>
Fade down
<div data-aos="fade-down"></div>
Fade right
<div data-aos="fade-right"></div>
Fade left
<div data-aos="fade-left"></div>
Fade up right
<div data-aos="fade-up-right"></div>
Fade up left
<div data-aos="fade-up-left"></div>
Fade down right
<div data-aos="fade-down-right"></div>
Fade down left
<div data-aos="fade-down-left"></div>
Flip
Flip left
<div data-aos="flip-left"></div>
Flip right
<div data-aos="flip-right"></div>
Flip up
<div data-aos="flip-up"></div>
Flip down
<div data-aos="flip-down"></div>
Zoom
Zoom in
<div data-aos="zoom-in"></div>
Zoom in up
<div data-aos="zoom-in-up"></div>
Zoom in down
<div data-aos="zoom-in-down"></div>
Zoom in left
<div data-aos="zoom-in-left"></div>
Zoom in right
<div data-aos="zoom-in-right"></div>
Zoom out
<div data-aos="zoom-out"></div>
Zoom out up
<div data-aos="zoom-out-up"></div>
Zoom out down
<div data-aos="zoom-out-down"></div>
Zoom out right
<div data-aos="zoom-out-right"></div>
Zoom out left
<div data-aos="zoom-out-left"></div>
Different setting examples
Fade up
<div data-aos="fade-up" data-aos-duration="3000"></div>
Fade down
<div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"></div>
Fade right
<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine"></div>
Fade left
<div data-aos="fade-left" data-aos-anchor="#example-anchor" data-aos-offset="500" data-aos-duration="50></div>
Fade zoom in
<div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0"></div>
Flip left
<div data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000"></div>
Anchor placement
Fade up
<div data-aos="fade-up" data-aos-anchor-placement="top-bottom"></div>
Fade up
<div data-aos="fade-up" data-aos-anchor-placement="center-bottom"></div>
Fade up
<div ata-aos="fade-up" data-aos-anchor-placement="bottom-bottom"></div>
Fade up
<div data-aos="fade-up" data-aos-anchor-placement="top-center"></div>
Fade up
<div data-aos="fade-up" data-aos-anchor-placement="center-center"></div>
Fade up
<div data-aos="fade-up" data-aos-anchor-placement="bottom-center"></div>