AOS Animation

  2. Animation
  3. 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 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