logologo

AOS Animation

AOS animation

For more detailed follow below steps.

Init AOS

// The Below Function is example of how to initlize reveal
<script>
AOS.init();
< /script >

How To Use It?

All you have to do is to adddata-aosattribute to html element, like so:

< div data-aos="animation_name" >

Advanced Settings

These settings can be set both on certain elements, or as default while initializing script (in options object withoutdata- part).

Attribute Description Example value Default value
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

Animation

There are serveral predefined animations you can use already:.

  1. Fade animations:
    1. fade
    2. fade-up
    3. fade-down
    4. fade-left
    5. fade-right
    6. fade-up-right
    7. fade-up-left
    8. fade-down-right
    9. fade-down-left
  2. Flip animations:
    1. flip-up
    2. flip-down
    3. flip-left
    4. flip-right
  3. Slide animations:
    1. slide-up
    2. slide-down
    3. slide-left
    4. slide-right
  4. Zoom animations:
    1. zoom-in
    2. zoom-in-up
    3. zoom-in-down
    4. zoom-in-left
    5. zoom-in-right
    6. zoom-out
    7. zoom-out-up
    8. zoom-out-down
    9. zoom-out-left
    10. zoom-out-right

Anchor placement:

For more detailed follow below steps.

  1. top-bottom
  2. top-center
  3. top-top
  4. center-bottom
  5. center-center
  6. center-top
  7. bottom-bottom
  8. bottom-center
  9. bottom-top

Easing functions:

For more detailed follow below steps.

  1. linear
  2. ease
  3. ease-in
  4. ease-out
  5. ease-in-out
  6. ease-in-back
  7. ease-out-back
  8. ease-in-out-back
  9. ease-in-sine
  10. ease-out-sine
  11. ease-in-out-sine
  12. ease-in-quad
  13. ease-out-quad
  14. ease-in-out-quad
  15. ease-in-cubic
  16. ease-out-cubic
  17. ease-in-out-cubic
  18. ease-in-quart
  19. ease-out-quart
  20. ease-in-out-quart