Open In App

Animate a div on mouse scroll using AOS

Last Updated : 23 Feb, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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=”https://unpkg.com/aos@next/dist/aos.css” />

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

<script src=”https://unpkg.com/aos@next/dist/aos.js”></script>
<script>
AOS.init();
</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.

HTML




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


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads