Animate On Scroll

Animates elements into view as the user scrolls down the page.


About the Plugin

This feature is implemented by including the aos javascript library (V2). For a full list of options, see the project on GitHub.

Our script simply initializes the plugin globally, allowing all animation options to be specified by data-attributes on the HTML elements.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

1. Include the library in your page

Link the CSS right before the head closing tag of your page, where you see the other library scripts. This line should be inserted after jquery.min.css and before main.css.

          
    <!-- AOS CSS -->
    <link rel="stylesheet" href="plugins/aos/aos.min.css"/>
          
          

Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.min.js and before custom.js.

        
  <!-- AOS (Animate On Scroll - animates elements into view 
  while scrolling down) -->
  <script type="text/javascript" src="plugins/aos/aos.min.js"></script>
        
        

Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

        
  <!-- AOS (Animate On Scroll - animates elements into view 
  while scrolling down) -->
  <script type="text/javascript" src="https://unpkg.com/aos@~2.3.4"></script>
        
        

Defaults

Our scripts set once to true globally, so elements will not animate out when leaving the viewport.

once:true

To override, add data-aos-once="false" to any element you wish to animate both in and out.

Basic Usage

Simply add data attribute data-aos to specify the desired animation. Use data attributes with prefix data-aos-* to configure other options on the element.

            
  <div data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000">
    Animated in 1000 milliseconds after 500 milliseconds!
  </div>
            
            

Animations are run only once by default (on entering the viewport).

For a full list of options and built-in animations, please visit the official AOS documentation at GitHub.