Skip to content
Related Articles

Related Articles

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=
  
    <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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :