# AOS.js Showcase

Animate On Scroll Library

50+ Animations Easy Setup Lightweight

## 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.

<div data-aos="fade-up"></div>

## 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"