AOS.js

Download Back To CSSScript.Com

Animate On Scroll Library Demo

Fade Animations

Fade Up

data-aos="fade-up"

Fade Down

data-aos="fade-down"

Fade Right

data-aos="fade-right"

Fade Left

data-aos="fade-left"

Fade Up Right

data-aos="fade-up-right"

Fade Up Left

data-aos="fade-up-left"

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

data-aos="zoom-in"

Zoom In Up

data-aos="zoom-in-up"

Zoom In Down

data-aos="zoom-in-down"

Zoom Out

data-aos="zoom-out"

Zoom Out Up

data-aos="zoom-out-up"

Zoom Out Down

data-aos="zoom-out-down"

Different Settings

Slow Duration

data-aos-duration="3000"

Linear Easing

data-aos-easing="linear"

High Offset

data-aos-offset="300"

(Triggers later)

Delay 500ms

data-aos-delay="500"

Anchor Placement

The green box animates when the red box (the anchor) enters the view (top-bottom).

ANCHOR
TARGET
data-aos-anchor="#trigger-left"