Aos

Small library to animate elements on your page as you scroll.

License: MIT
https://github.com/michalsnik/aos/tree/v2

Aos Examples

Aos Fade

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

<div data-aos="fade-up"></div>

<div data-aos="fade-down"></div>

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

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

Aos Flip

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

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

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

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

Aos Slide

<div data-aos="slide-up"></div>

<div data-aos="slide-down"></div>

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

<div data-aos="slide-right"></div>

Aos 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-left"></div>

<div data-aos="zoom-out-right"></div>

                
                  <!-- 
                    Attributes
                      data-aos="fade-up"
                      data-aos-offset="200"
                      data-aos-delay="150"

                      data-aos-duration="1000"
                      data-aos-easing="ease-in-out"
                      data-aos-mirror="true"
                      data-aos-once="true"
                      data-aos-anchor-placement="top-center"
                  -->
                  <div data-aos="fade-up" data-aos-delay="150"></div>

                
                  <!-- Vendor : AOS -->
                  <link rel="stylesheet" href="../assets/vendors/aos/dist/aos.css">

                
                  <!-- Vendor : AOS -->
                  <script src="../assets/vendors/aos/dist/aos.js"></script>
                  <script>
                    document.addEventListener('DOMContentLoaded', function() {

                      AOS.init({
                        duration  : 700,
                        easing    : 'ease-in-out-sine',
                        once      : true
                      });
                      
                    });
                  </script>