Copy-paste the following <link> near the end of your pages under Nayzak Plugins SCSS to enable it.
<link href="assets/plugins/aos/sass/aos.scss" rel="stylesheet" type="text/css" media="all">
Copy-paste the following <script> near the end of your pages under Nayzak Javascript Plugins to enable it.
<script src="assets/plugins/aos/aos.min.js"></script>
Finally, we need to initialize AOS in JS:
<script>
AOS.init();
</script>
Now, we need to add basic AOS layout to our app:
<div data-aos="fade-up"></div>
<div data-aos="fade-up" data-aos-delay="50" data-aos-duration="800">Fade Up</div>
<div data-aos="fade-down" data-aos-delay="100" data-aos-duration="800">Fade Down</div>
<div data-aos="fade-right" data-aos-delay="150" data-aos-duration="800">Fade Right</div>
<div data-aos="fade-left" data-aos-delay="200" data-aos-duration="800">Fade Left</div>
<div data-aos="fade-up-right" data-aos-delay="250" data-aos-duration="800">Fade Up Right</div>
<div data-aos="fade-up-left" data-aos-delay="300" data-aos-duration="800">Fade Up Left</div>
<div data-aos="fade-down-right" data-aos-delay="350" data-aos-duration="800">Fade Down Right</div>
<div data-aos="fade-down-left" data-aos-delay="400" data-aos-duration="800">Fade Down Left</div>
<div data-aos="flip-left" data-aos-delay="50" data-aos-duration="800">Flip Left</div>
<div data-aos="flip-right" data-aos-delay="100" data-aos-duration="800">Flip Right</div>
<div data-aos="flip-up" data-aos-delay="150" data-aos-duration="800">Flip Up</div>
<div data-aos="flip-down" data-aos-delay="200" data-aos-duration="800">Flip Down</div>
<div data-aos="zoom-in" data-aos-delay="50" data-aos-duration="800">Zoom In</div>
<div data-aos="zoom-in-up" data-aos-delay="100" data-aos-duration="800">Zoom In Up</div>
<div data-aos="zoom-in-down" data-aos-delay="150" data-aos-duration="800">Zoom In Down</div>
<div data-aos="zoom-in-left" data-aos-delay="200" data-aos-duration="800">Zoom In Left</div>
<div data-aos="zoom-in-right" data-aos-delay="200" data-aos-duration="800">Zoom In Right</div>
<div data-aos="zoom-out" data-aos-delay="200" data-aos-duration="800">Zoom Out</div>
<div data-aos="zoom-out-up" data-aos-delay="200" data-aos-duration="800">Zoom Out Up</div>
<div data-aos="zoom-out-down" data-aos-delay="200" data-aos-duration="800">Zoom Out Down</div>
<div data-aos="zoom-out-right" data-aos-delay="200" data-aos-duration="800">Zoom Out Right</div>
<div data-aos="zoom-out-left" data-aos-delay="200" data-aos-duration="800">Zoom Out Left</div>
<div data-aos="fade-up" data-aos-duration="3000">Fade Up</div>
<div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500">Fade Down</div>
<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine">Fade Right</div>
<div data-aos="fade-left" data-aos-anchor="#example-anchor" data-aos-offset="500" data-aos-duration="500">Fade Left</div>
<div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0">Fade Zoom In</div>
<div data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000">Flip Left</div>
<div data-aos="fade-up" data-aos-anchor-placement="top-bottom">Top Bottom</div>
<div data-aos="fade-up" data-aos-anchor-placement="center-bottom">Center Bottom</div>
<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">Bottom Bottom</div>
<div data-aos="fade-up" data-aos-anchor-placement="top-center">Top Center</div>
<div data-aos="fade-up" data-aos-anchor-placement="center-center">Center Center</div>
<div data-aos="fade-up" data-aos-anchor-placement="bottom-center">Bottom Center</div>