AOS

Animate On Scroll Library

Scroll down to see the magic ✨

Getting Started

1. Initialize AOS:

AOS.init();

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

Fade Animations

Fade Up

Element fades in while moving upwards.

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

Fade Down

Element fades in while moving downwards.

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

Fade Right

Element fades in while moving to the right.

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

Fade Left

Element fades in while moving to the left.

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

Fade Up Right

Diagonal movement towards top-right.

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

Fade Up Left

Diagonal movement towards top-left.

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

Fade Down Right

Diagonal movement towards bottom-right.

<div data-aos="fade-down-right"></div>

Fade Down Left

Diagonal movement towards bottom-left.

<div data-aos="fade-down-left"></div>

Zoom Animations

Zoom In

Element zooms in from smaller size.

<div data-aos="zoom-in"></div>

Zoom In Up

Element zooms in while moving upwards.

<div data-aos="zoom-in-up"></div>

Zoom In Down

Element zooms in while moving downwards.

<div data-aos="zoom-in-down"></div>

Zoom Out

Element zooms out from larger size.

<div data-aos="zoom-out"></div>

Zoom Out Left

Element zooms out while moving left.

<div data-aos="zoom-out-left"></div>

Zoom Out Right

Element zooms out while moving right.

<div data-aos="zoom-out-right"></div>

Flip Animations

Flip Left

Element flips along the Y axis (left).

<div data-aos="flip-left"></div>

Flip Right

Element flips along the Y axis (right).

<div data-aos="flip-right"></div>

Flip Up

Element flips along the X axis (up).

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

Flip Down

Element flips along the X axis (down).

<div data-aos="flip-down"></div>

Timeline Example

2018

Project Started. Initial concept and design phase.

2019

First Prototype. Testing core functionalities and user feedback.

2020

Beta Launch. Opened to a limited number of users for stress testing.

2021

Official Release. Available to the public with full feature set.

2022

Major Update. Introduced new features and performance improvements.

Anchor Placement

Top-Bottom

Triggers when top of element hits bottom of viewport.

data-aos-anchor-placement="top-bottom"

Center-Bottom

Triggers when center of element hits bottom of viewport.

data-aos-anchor-placement="center-bottom"

Bottom-Bottom

Triggers when bottom of element hits bottom of viewport.

data-aos-anchor-placement="bottom-bottom"

Top-Center

Triggers when top of element hits center of viewport.

data-aos-anchor-placement="top-center"

Center-Center

Triggers when center of element hits center of viewport.

data-aos-anchor-placement="center-center"

Bottom-Center

Triggers when bottom of element hits center of viewport.

data-aos-anchor-placement="bottom-center"

Offset Examples

Different offsets trigger animations at different scroll positions.

Offset -200px

Triggers earlier (before element reaches trigger point).

data-aos-offset="-200"

Offset 0px

Standard trigger point.

data-aos-offset="0"

Offset 300px

Triggers later (element must be 300px into view).

data-aos-offset="300"

Once vs Repeat

Repeat Animation

Scroll up and down. I will animate every time.

data-aos-once="false"

Run Once

Scroll up and down. I will only animate once.

data-aos-once="true"

Async Content

AOS observes the DOM for new elements.

Initial Item

I was here from the start.