@extends('layouts.simple.master') @section('title', 'AOS Animation') @section('css') @endsection @section('main_content')

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 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
@endsection @section('scripts') @endsection