AOS Providing Beautiful Animations On Scroll

moreAOS  - Animate On Scroll is a CSS3 driven library which provides beautiful animations on scroll to make the user interface more attractive. As we scroll our web page AOS allows the elements to animate on scroll up/down. If you have scrolled down and you again scroll up to the top the elements will again animate to it's previous state which is another attractive part of AOS.

AOS works simply by watching the  elements and their positions defined by you and then adding/removing the aos-animate class to the element. It is not just that simple but yes every aspect of animation is handled by css.


How To Setup

Using bower:

 bower install aos --save

Using npm:

npm install aos --save

Now Linking the AOS  styles with your webpage: 
 

  <link rel="stylesheet" href="bower_components/aos/dist/aos.css" />

Adding  the AOS  Script: 
 

 <script src="bower_components/aos/dist/aos.js"></script>

Init AOS:

<script>
    AOS.init();
  </script>

How To Use

After setingup with aos, you can easily use it just by adding aos-data attribute to your html element

<div data-aos="animation_name">

 AOS provides many advanced features and settings to make amazing animations like controlling the animation duration, When to trigger the animation based on the screen sizes and many more.
 

body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
    transition-duration: 4000ms;
  }

Examples:

To add basic animation on an element in Html:

<div class="some-item" aos="fade">Example Element</div>

In the above Example fade animation be added to the element on scroll up/down.

If you want to control the duration of your animation and other features :

<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">