Animations

Usage

You can add animation to any element using data-aos attribute. This will add the animation to an element. You also have to add a style and script tag in the head and the footer of your page.

CSS

<!-- Vendor Stylesheets -->
<link href="../assets/vendor/aos/dist/aos.css" rel="stylesheet">

JavaScript

<!-- Vendor Javascripts -->
<script src="../assets/vendor/aos/dist/aos.js"></script>

Initialization

Set animation using data-aos="ANIMATION-NAME" on any element. The animation will trigger when you reach the certain viewport.

Attributes

By deafult animations are disabled on mobile, but you can enable by change $disable-animations-on-mobile: true; in your variables.

For more Details see AOS Documentation