Animation on scroll using AOS Animate On Scroll Library

Introduction

There are many libraries for animation on scroll. In this tutorial we will see the animation on scroll using AOS library. Animation on scroll using AOS Animate On Scroll Library. AOS is also called as Animation On scroll. AOS provides different kind of animations on scroll.

Steps to add animation on scroll

Step 1: Add AOS library

You can add the AOS library in your project by two ways

1. Use direct links
   CSS : <link href=”https://unpkg.com/[email protected]/dist/aos.css” rel=”stylesheet”>
   JS:     <script src=”https://unpkg.com/[email protected]/dist/aos.js”></script>
2. Download the library and include the files
   To download the AOS library CLICK HERE
   Once you download the zip add the aos.css and aos.js file from dist folder to your project. Animation on scroll using AOS Animate On Scroll Library

Step 2: Initialize AOS

To initialize the AOS add below script before the end of body tag

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

Step 3: Add the animation classes

AOS library provides number of classes for different types of animation

1. FADE
   1. data-aos=”fade-up”
   2. data-aos=”fade-down”
   3. data-aos=”fade-right”
   4. data-aos=”fade-left”
   5. data-aos=”fade-up-right”
   6. data-aos=”fade-up-left”
   7. data-aos=”fade-down-right”
   8. data-aos=”fade-down-left”
2. FlIP
   1. data-aos=”flip-left”
   2. data-aos=”flip-right”
   3. data-aos=”flip-up”
   4. data-aos=”flip-down”
3. ZOOM
   1. data-aos=”zoom-in”
   2. data-aos=”zoom-in-up”
   3. data-aos=”zoom-in-down”
   4. data-aos=”zoom-in-lef”
   5. data-aos=”zoom-in-right”
   6. data-aos=”zoom-out”
   7. data-aos=”zoom-out-up”
   8. data-aos=”zoom-out-down”
   9. data-aos=”zoom-out-left”
   10. data-aos=”zoom-out-right”
4. DIFFERENT SETTINGS EXAMPLES
   1. data-aos-duration=”3000″
      it will set the speed of flip, zoom, fade
   2. data-aos-easing=”linear”
      This attribute is used to control the time function of the animating element. It has three values linear,ease-in-out and ease-out-quart
      
5. ANCHOR PLACEMENT
   data-aos-anchor-placement — By default, the animations on an element are applied as soon as its top part reaches the bottom part of the window. This behavior can be changed using the data-aos-anchor-placement attribute
   1. data-aos-anchor-placement=”top-bottom”
   2. data-aos-anchor-placement=”center-bottom”
   3. data-aos-anchor-placement=”bottom-bottom”
   4. data-aos-anchor-placement=”top-center”
   5. data-aos-anchor-placement=”top-center”
6. Animate for first scroll only
   To animate only for first scroll add attribute data-aos-once=”ture”

To see the demo CLICK HERE