Animate On Scroll

Animates elements into view as the user scrolls down the page

About the Plugin

WebsiteGitHubnpm

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.