@extends('layouts.admin.master') @section('title')AOS Animation {{ $title }} @endsection @push('css') @endpush @section('content') @component('components.breadcrumb') @slot('breadcrumb_title')

AOS Animation

@endslot
  • Animation
  • AOS Animation
    • @endcomponent
    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
    @push('scripts') @endpush @endsection