# Animate On Scroll

Animates elements into view as the user scrolls down the page

###

About the Plugin

Website GitHub npm

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

   - 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.js` and before `theme.js`.

         <!-- AOS (Animate On Scroll - animates elements into view while scrolling down) -->
         <script type="text/javascript" src="assets/js/aos.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>

2. ###### Load the initializer code in `index.js`

   - Declare the following import statement in `js/mrare/index.js`. This ensures that the initializer code is included in the `theme.js` bundle.

         import './aos';

###

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">
      Animated in 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.