How to Animate Your Website on Scroll Using AOS.js (With Examples)

Adding subtle animations to your website can greatly improve user engagement and visual appeal. AOS.js (Animate On Scroll) is a lightweight JavaScript library that allows you to add smooth, customizable scroll-based animations with ease, no JavaScript experience required.

In this tutorial, you’ll learn how to install AOS.js and apply beautiful scroll-triggered animations to your website elements using simple HTML attributes.

What is AOS.js?

AOS (Animate On Scroll) is an open-source library that animates HTML elements when they enter the viewport. You can use it to fade, slide, zoom, or flip elements as users scroll down your webpage.

Key Features:
  • No coding required, just add data attributes
  • 20+ built-in animations
  • Easy to customize (duration, delay, offset)
  • Lightweight and mobile-friendly

Step 1: Include AOS in Your Project

You can add AOS.js via CDN (the fastest way):

Add in your <head>:
<!-- AOS CSS -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
Add before your closing </body> tag:
<!-- AOS JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script>
  AOS.init();
</script>

Alternatively, if you’re using npm:

npm install aos

Then import it into your JavaScript:

import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init();

Step 2: Add Data Attributes to Animate Elements

AOS uses data-aos attributes to trigger animations.

Example:
<div data-aos="fade-up">
  <h2>Scroll to Animate Me</h2>
</div>

This will cause the element to fade in and slide up when it enters the viewport.

Step 3: Customize the Animation

You can customize animations using additional attributes:

<div
  data-aos="zoom-in"
  data-aos-delay="300"
  data-aos-duration="1000"
  data-aos-easing="ease-in-out"
>
  <p>This zooms in after a delay</p>
</div>

Common attributes:

  • data-aos-delay: Delay in milliseconds (e.g. 200)
  • data-aos-duration: Animation time (e.g. 1000)
  • data-aos-offset: How far from the viewport the animation should start
  • data-aos-easing: Easing style (ease, ease-in-out, etc.)

Popular AOS Animation Types

AnimationValue
Fadefade, fade-up, fade-down, fade-left, fade-right
Flipflip-left, flip-right, flip-up, flip-down
Slideslide-up, slide-down, slide-left, slide-right
Zoomzoom-in, zoom-out, zoom-in-up, zoom-out-down

See all available options in the AOS documentation.

Step 4: Refresh Animations on Dynamic Content

If you add content via JavaScript (e.g., with a template or after user interaction), use:

AOS.refresh();

Example Layout Using AOS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AOS.js Example</title>
    <!-- AOS CSS -->
    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
</head>

<body>
    <section>
        <h1 data-aos="fade-down">Welcome to Templates Jungle</h1>
        <p data-aos="fade-up" data-aos-delay="200">This content fades in on scroll.</p>
    </section>
    <!-- AOS JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>
</body>

</html>

Final Thoughts

AOS.js makes it incredibly easy to add elegant animations to your HTML/CSS website. Whether you’re using Bootstrap, Tailwind, or plain HTML, AOS fits right in and enhances the user experience with minimal effort.

You can check out some Free HTML CSS Website Templates that already use AOS.js and see how scroll animations bring your website to life.

Popular Downloads