AOS Animation

  • 3
    Notifications
    • user

      Emay Walter liked your post

      10 minutes ago
    • user

      Allie Gratershared your post

      5 hours ago
    • user

      Colin Sikcommented on your post

      yesterday
    • Check all
  • 2
    user
    Jane Cooper

    active

    • user

      Hello.how are you?

    • user

      Hi, i'm fine.what about you?

    • user

      I am facing js issue can you help me?

    • user

      Sure, i will help you.

  • 2
    Cart
    empty
    Oops! Your cart empty!!!
  • profile

    Wade Warren

    UI Designer
user

Wade Warren

UI Designer

AOS Example Animation

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 add data-aos attribute 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 without data- 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:

  • 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

  • Flip Animations:

    1. flip-up
    2. flip-down
    3. flip-left
    4. flip-right

  • Slide Animations:

    1. slide-up
    2. slide-down
    3. slide-left
    4. slide-right

  • 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:

  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:

  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