Have you ever seen those long web pages where different animations are being applied as you scroll down? Scroll down and you will see the live demo right on this page.

A website design comes to life with well-executed animation. If you're looking for the proper libraries to add effects to your project, you have come to the right place.

Web design is no more limited to content and graphics. One cannot deny the role of animations and their effects on websites. I think it's about time for you to enhance and beautify your Bootstrap site for better UI/UX.

AOS is a very simple and easy to use animation library. AOS uses CSS3 animation with the combination of jquery to animate the content on the website.

How AOS Works

AOS is a CSS-driven "On Scroll" animation library. Every aspect of animation is handled by CSS.

To use animation on scroll plugin, we need to install only two files aos.css and aos.js:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Add the CSS in head and js before the closing body tag.

Once the two files have been installed we need to init it.

<script type="text/javascript">    
  // Init AOS
  function aos_init() {
    AOS.init({
      duration: 2000
    });
  }
  $(window).on('load', function() {
    aos_init();
  });
</script>

That is all we need to do and we are ready to animate the elements on the site. Using data-aos attribute we can design all our elements very easily.

<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>


<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>


<div class="item" data-aos="slide-up">7</div>


<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>

The best part of the AOS is that we can animate elements while scrolling down and to up of the page as well. AOS is very easy to implement and can be customized as per the requirements.

Explore all the available animation and options on the official website - AOS - Animate On Scroll

AOS is fully open source, so if you have an interesting idea or something is not working how you'd expect open issue and see you on GitHub! Any contribution is highly appreciated.

All the best!