AOS.js Animation Showcase

Basic Fade Animations

↑

Fade Up

Classic animation - elements fade in from below.

data-aos="fade-up"

↓

Fade Down

Elements fade in from above.

data-aos="fade-down"

←

Fade Left

Elements slide in from the right.

data-aos="fade-left"

→

Fade Right

Elements slide in from the left.

data-aos="fade-right"

Flip Animations

Flip Left

data-aos="flip-left"

Flip Right

data-aos="flip-right"

Flip Up

data-aos="flip-up"

Flip Down

data-aos="flip-down"

Zoom Animations

⊕

Zoom In

Element scales up from center.

data-aos="zoom-in"

↗

Zoom In Up

Scales up while moving from below.

data-aos="zoom-in-up"

⊖

Zoom Out

Element scales down from larger size.

data-aos="zoom-out"

Advanced: Easing & Delays

Ease In Back

Animation with a slight pull-back effect before entering.

data-aos-easing="ease-in-back"

Ease Out Cubic + Delay

Smooth cubic easing with 200ms delay.

data-aos-delay="200"

Long Duration

Slow, graceful animation over 1.5 seconds.

data-aos-duration="1500"

Staggered Effects

50+

Animations

13KB

Gzipped Size

100%

CSS Driven

19K+

GitHub Stars

Slide Animations

Slide Right

Element slides in from outside the viewport on the left.

data-aos="slide-right"

Slide Left

Element slides in from outside the viewport on the right.

data-aos="slide-left"

Timeline with AOS

Step 1: Installation

Install via npm or include CDN links in your HTML.

npm install aos --save

Step 2: Initialize

Initialize AOS in your JavaScript file.

AOS.init();

Step 3: Add Attributes

Add data-aos attributes to your HTML elements.

Global Configuration

You can configure AOS globally on initialization:

				AOS.init({
				offset: 200,        // offset from original trigger point
				duration: 600,      // animation duration in ms
				easing: 'ease-in-sine',  // easing function
				delay: 100,         // delay before animation starts
				once: false,        // whether animation should fire once
				mirror: false,      // animate out while scrolling past
				anchorPlacement: 'top-bottom' // trigger point
				});
			

Popular Options:

once: true - Animate only once (don't reverse)
mirror: true - Animate out when scrolling past
offset: 120 - Trigger 120px before element enters viewport
disable: 'mobile' - Disable on mobile devices

Ready to Use AOS.js?

Simple, powerful, and flexible scroll animations

Mix animations, delays, durations, and easing to create unique experiences!

data-aos="fade-up" data-aos="zoom-in" data-aos="flip-left"

AOS.js Showcase