AOS (Animate On Scroll)

Animate elements on your static web pages as visitors scroll down with simple data attributes.

• Official Website: michalsnik.github.io/aos
• Category: Interactive Scripts & Animation
• Type: Scroll Animation Library

Overview

AOS (Animate On Scroll) is a lightweight JavaScript library that triggers CSS animations as elements scroll into the viewport.

Instead of writing complex intersection observers or scroll listeners, you simply add data-aos="fade-up" attributes to your HTML elements. AOS handles the rest smoothly, creating a polished, dynamic experience on static landing pages.

Key Highlights & Features

• Simple Data Attributes: Add animations via data-aos="fade-up" or data-aos="zoom-in".
• Hardware-Accelerated CSS: Animations use smooth CSS transitions for high frame rates.
• Configurable Timing: Control animation duration, easing, delay, and offset.
• Zero Dependencies: Standalone script that pairs effortlessly with any static HTML page.

How It Works with Static Websites

Add AOS to your static HTML:

<!-- AOS CSS in head -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

<!-- Animate elements with data-aos attributes -->
<div data-aos="fade-up" data-aos-duration="800">
  <h2>This heading fades up on scroll</h2>
</div>

<div data-aos="flip-left" data-aos-delay="200">
  <p>This box flips in as you scroll down!</p>
</div>

<!-- AOS Script before closing body -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init({
    once: true // Animation happens only once while scrolling down
  });
</script>

When to Use It

• Marketing landing pages and portfolios needing subtle entrance animations.
• Highlighting features, cards, and testimonials as users scroll down static pages.