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

AttributeDescriptionExampleDefault
data-aos-offsetChange offset to trigger animations sooner or later (px)200120
data-aos-duration*Duration of animation (ms)600400
data-aos-easingChoose timing function to ease elements in different waysease-in-sineease
data-aos-delayDelay animation (ms)3000
data-aos-anchorAnchor element, whose offset will be counted to trigger animation instead of actual elements offset#selectornull
data-aos-anchor-placementAnchor placement - which one position of element on the screen should trigger animationtop-centertop-bottom
data-aos-onceChoose wheter animation should fire once, or every time you scroll up/down to elementtruefalse

*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