AOS

Animate On Scroll Library

SCROLL DOWN

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-offset
                      =
                      "0"
                    
                    
                      data-aos-delay
                      =
                      "300"
                      >
                    
                    
                       </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
                      =
                      "bottom-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>

GET IT

Download View on Github

INSTALL USING YARN, NPM, BOWER

yarn add aos

npm install aos --save

bower install aos --save

CDN SOURCES


                <linkhref="https://unpkg.com/aos@2.3.1/dist/aos.css"
                rel=
                "stylesheet" >


                <
                script
                src=
                  "https://unpkg.com/aos@2.3.1/dist/aos.js"

                >

INITIALIZE AOS


                <script>
                 AOS.init();
                </script>

AOS

FADE

FLIP

ZOOM

DIFFERENT SETTINGS EXAMPLES

ANCHOR PLACEMENT

GET IT

INSTALL USING YARN, NPM, BOWER

CDN SOURCES

CSS

JS

INITIALIZE AOS