Loading...

### AOS Animation

##### AOS Example animation

Image caption 1
Image caption 2
Image caption 3
Image caption 4
Image caption 5
Image caption 6
Image caption 7
Image caption 8
Image caption 9
Image caption 10
Image caption 11
Image caption 12
Image caption 13
Image caption 14
Image caption 15
Image caption 16
Image caption 17
Image caption 18
Image caption 19
Image caption 20
Image caption 21
Image caption 22
Image caption 23
Image caption 24
Image caption 25
Image caption 26
Image caption 27
Image caption 28
Image caption 29
Image caption 30
Image caption 31
Image caption 32
Image caption 33

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

  - 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

##### Anchor placement:

- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top

##### Easing functions:

- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine

- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart