AOS Animation | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### AOS Animation

##### 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 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