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>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>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><div data-aos="fade-up"
data-aos-anchor-placement="top-center">
</div><div data-aos="fade-up"
data-aos-anchor-placement="center-center">
</div><div data-aos="fade-up"
data-aos-anchor-placement="bottom-center">
</div>Install using Yarn, Npm, Bower
yarn add aosnpm install aos --savebower install aos --saveCDN sources
CSS
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">JS
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>Initialize AOS
<script>
AOS.init();
</script>