AOS (Animate On Scroll) Library: Customizing Animations Made Simple

You don’t need a heavy framework to make a beautiful, interactive site. With clean HTML, modern CSS,
and a tiny helper like AOS (Animate On Scroll), you can ship fast, engaging pages
that feel premium without bloating your codebase. Think about it: how many sites do you visit every day
that look static, flat, and—let’s be honest—a little boring? Now imagine your homepage:
even a subtle fade, a gentle rotation, or a playful slide-in instantly sets your design apart.
It makes the visitor feel like something is happening, like the site is alive and responsive.
That’s the kind of small detail that makes people stop scrolling and pay attention.

Adding just a touch of scroll-triggered animation can completely transform perception.
Suddenly, your layout feels intentional and modern; your brand feels more polished;
and your content has rhythm and flow rather than just stacking in blocks.
The best part? AOS is lightweight, super easy to install, and doesn’t require mastering a full JavaScript framework.
It’s one of those rare tools where ten minutes of effort can make your site look like
you invested weeks into custom motion design.

If your website still feels “stuck” compared to competitors, this is your low-hanging fruit.
Drop in AOS, experiment with a couple of animations, and see how quickly your portfolio,
blog, or e-commerce store starts to feel premium. Challenge yourself:
give your visitors more than just information—give them an experience worth remembering.

Add CSS to your website header

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Add JS at the end of body tag

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>  
<script type="text/javascript">
AOS.init({   
});
</script> 

HTML

<div class="box" data-aos="my-animation-1">1</div>
<div class="box" data-aos="my-animation-2">2</div>
<div class="box" data-aos="my-animation-3">3</div>
<div class="box" data-aos="my-animation-1">4</div>
<div class="box" data-aos="my-animation-2">5</div>
<div class="box" data-aos="my-animation-3">6</div>
<div class="box" data-aos="my-animation-1">7</div>
<div class="box" data-aos="my-animation-2">8</div>
<div class="box" data-aos="my-animation-3">9</div> 

CSS

/* Default Style of Boxes */
.box {
  width: 250px;
  height: 250px;
  margin: 2rem auto; 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:sans-serif;
  font-size: 5rem;
  color: #FFF;
}
 
/* Before of Animation 1 */
[data-aos="my-animation-1"] {
  transform: rotate(0deg);
  background: black;
  opacity: 0; 
}
/* After of Animation 1 */ 
[data-aos="my-animation-1"].aos-animate {
  transform: rotate(360deg); 
  opacity: 1; 
}
	
/* Before of Animation 2 */
[data-aos="my-animation-2"] {
  background: black;
  transition-property: background; 
}
/* After of Animation 2 */
[data-aos="my-animation-2"].aos-animate {
  background: cyan; 
}
	
/* Before of Animation 3 */
[data-aos="my-animation-3"] {
  transform: translateX(-100%);
  opacity: 0; 
}
/* After of Animation 3 */
[data-aos="my-animation-3"].aos-animate {
  transform: translateX(0%); 
  background: purple;
  opacity: 1; 
}

DEMO: How It Looks