Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

Animate a div on mouse scroll using AOS

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

AOS is a small library to animate elements on your page as you scroll.

AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down.

Installation: Installing AOS is very simple:

  • Add the below tag in the head tag of the webpage.

<link rel=”stylesheet” href=”” />

  • Add script right before closing </head> tag, and initialize AOS:

<script src=””></script>

That’s it, now you have successfully installed aos in your webapp.

Set animation using  data-aos attribute :

<div data-aos="fade-in"></div>

Example: Below is an example to demonstrate animation effect.


<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href=
    <script src=
        body {
            padding: 100vh 0;
        div {
            margin: 0 auto;
            color: #fff;
            padding: 100px;
            font-size: 25px;
            width: 50%;
            background-color: green;
    <div data-aos="zoom-in">
        Geeks for geeks


My Personal Notes arrow_drop_up
Last Updated : 23 Feb, 2021
Like Article
Save Article
Similar Reads
Related Tutorials