Animate a div on mouse scroll using AOS

Last Updated : 23 Feb, 2021

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