Animate on Scroll with AOS

How to Animate on Scroll with AOS (Step-by-Step for Beginners)

by

Adding subtle animations as the user scrolls down a page can improve engagement and give your site a modern feel. A great way to do this is by using AOS (Animate On Scroll) — a lightweight and easy-to-use JavaScript library.

In this tutorial, you’ll learn how to animate elements on scroll using AOS, step by step, with clean HTML, CSS, and a CDN link.

👁️ Preview

🚀 What is AOS?

AOS stands for Animate On Scroll. It allows you to apply pre-made animations to HTML elements, triggered automatically as they enter the viewport.

✅ No need to write complex JavaScript
✅ Very beginner-friendly
✅ Works with any layout

🧱 Step 1: Add the AOS Library via CDN

Add the following lines to your HTML <head> and before the closing </body> tag:

<!-- AOS CSS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<!-- AOS JS -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

✨ Step 2: Initialize AOS

Just below the AOS script tag, initialize it with:

<script>
  AOS.init();
</script>

This will enable AOS on your page.

🧪 Step 3: Apply AOS to Elements

Now apply the animation to any element using the data-aos attribute.

<h2 data-aos="fade-up">Welcome to Dev Junior School</h2>
<p data-aos="fade-right">This paragraph will fade in from the right.</p>
<div data-aos="zoom-in">Animated card</div>

🎨 Optional: Basic CSS Styling

body {
  font-family: Arial, sans-serif;
  padding: 2rem;
}

div {
  background: #7179F4;
  padding: 20px;
  color: #fff;
  margin-top: 20px;
  border-radius: 8px;
}

🛠️ Step 4: Explore AOS Animation Options

Some popular values for data-aos:

  • fade-in
  • fade-up
  • fade-down
  • fade-left / fade-right
  • zoom-in / zoom-out
  • flip-left / flip-right
  • slide-up / slide-down

You can also add delay and duration:

<div data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
  Delayed and slower animation
</div>

✅ Final Result

You now have scroll-triggered animations that:

  • Look modern
  • Are easy to implement
  • Work on all devices
  • Require zero JavaScript knowledge

AOS is perfect for animating headers, sections, cards, call-to-actions, and much more.

🔧 Troubleshooting Tips

  • Make sure to include both CSS and JS files for AOS
  • Initialize AOS only once after the DOM loads
  • Avoid animating hidden or absolutely positioned elements if you’re not seeing the effect

Leave a Comment