Animations

Animate On Scroll for any element.

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.


<div data-aos="fade">...</div>
<div data-aos="fade-up">...</div>
<div data-aos="flip-down">...</div>
<div data-aos="slide-left">...</div>
<div data-aos="zoom-out">...</div>

Attributes


<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center">
</div>

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

Usage
Attibutes