AOS (Animate On Scroll) Plugin

Bring your web pages to life with scroll-triggered animations using the AOS library and CSS!

What is AOS?

AOS (Animate On Scroll) is a popular open-source library that allows you to animate elements as you scroll down, using simple HTML attributes and CSS. It’s widely used for modern, interactive, and visually appealing web experiences.

Easy to use: Add data-aos attributes to any element.
Customizable: Choose from dozens of animation types, durations, delays, and more.
CSS-powered: Animations are handled via CSS transitions and transforms.
Responsive & performant: Works well on all modern browsers and devices.

Basic Usage

<!-- 1. Include AOS CSS & JS -->
<link rel="stylesheet" href="aos.css">
<script src="aos.js"></script>

<!-- 2. Add data-aos attribute -->
<div data-aos="fade-up">I will fade up on scroll!</div>

<!-- 3. Initialize AOS in JS -->
<script>AOS.init();</script>

💡 Tip: You can combine data-aos with custom CSS for even more creative effects!

Interactive Examples

Fade Up

Fade Up Animation

<div data-aos="fade-up">Fade Up Animation</div>

Zoom In

Zoom In Animation

<div data-aos="zoom-in">Zoom In Animation</div>

Flip Left

Flip Left Animation

<div data-aos="flip-left">Flip Left Animation</div>

Slide Right

Slide Right Animation

<div data-aos="slide-right">Slide Right Animation</div>

Fade In on Hover

<div class="aos-fade-in-hover">Fade In on Hover</div>

Slide Up on Hover

<div class="aos-slide-up-hover">Slide Up on Hover</div>

Pulse on Hover

<div class="aos-pulse-hover">Pulse on Hover</div>

Rotate on Hover

<div class="aos-rotate-hover">Rotate on Hover</div>

Note: The above examples use only CSS transitions and animations to simulate AOS-like effects on hover. No JavaScript is required!

Pure CSS Scroll Animation (No JS)

Scroll to Reveal (Pure CSS)

<div class="aos-scroll-fade-in">
    Scroll to Reveal (Pure CSS)
</div>

How it works: This box will animate in as you scroll to it using only modern CSS (animation-timeline: view()). Try it in the latest Chrome/Edge for a true scroll effect!