AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it's previous state and are ready to animate again if you scroll down.


Basic usage

All you have to do is to add data-aos attribute to html element, like so:

<div data-aos="animation_name">

Script will trigger "animation_name" animation on this element, if you scroll to it.


Options

You can set following settings to your elements.

Attribute Description Example Default
data-aos-offset Change offset to trigger animations sooner or later (px) 200 120
data-aos-duration *Duration of animation (ms) 600 400
data-aos-easing Choose timing function to ease elements in different ways ease-in-sine ease
data-aos-delay Delay animation (ms) 300 0
data-aos-anchor Anchor element, whose offset will be counted to trigger animation instead of actual elements offset #selector null
data-aos-anchor-placement Anchor placement - which one position of element on the screen should trigger animation top-center top-bottom
data-aos-once Choose wheter animation should fire once, or every time you scroll up/down to element true false

*Duration accept values from 50 to 3000, with step 50ms, it's because duration of animation is handled by css, and to not make css longer than it is already I created implementations only in this range. I think this should be good for almost all cases.

Read more description in the official documentation.


Animations

There are serveral predefined animations you can use already:

  • Fade animations:

    • fade
    • fade-up
    • fade-down
    • fade-left
    • fade-right
    • fade-up-right
    • fade-up-left
    • fade-down-right
    • fade-down-left

  • Flip animations:

    • flip-up
    • flip-down
    • flip-left
    • flip-right

  • Slide animations:

    • slide-up
    • slide-down
    • slide-left
    • slide-right

  • Zoom animations:

    • zoom-in
    • zoom-in-up
    • zoom-in-down
    • zoom-in-left
    • zoom-in-right
    • zoom-out
    • zoom-out-up
    • zoom-out-down
    • zoom-out-left
    • zoom-out-right


Some Examples
fade-up
fade-down
slide-left
slide-right
flip-up
flip-down
zoom-in
zoom-out