gif
Don't Miss Out! Our new update has been released.
gif
Something you love is now on sale!
Buy now !
  • Bookmark
  • 2
    Cart
    • Furniture Chair for Home
      $12.45
    • Rest Well Chair
      $49.00
    • Order Total : $1000.00
    • View Cart Checkout
  • 4
    Notifications

    • Delivery processing

    • Order Complete

    • Tickets Generated

    • Delivery Complete

  • Emay Walter

    Admin

AOS Animation

  2. Animation
  3. AOS Animation
AOS Example animation
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
Image description
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 several 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