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>
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.