@extends('layouts.master') @section('title') @lang('translation.animation') @endsection @section('css') @endsection @section('content') @component('components.breadcrumb') @slot('li_1') Advance UI @endslot @slot('title') Animation @endslot @endcomponent

Fade Animation

Fade Up

<div data-aos="fade-up"></div>
Mac Image

Fade Down

<div data-aos="fade-down"></div>
Mac Image

Fade Right

<div data-aos="fade-right"></div>
Mac Image

Fade Left

<div data-aos="fade-left"></div>
Mac Image

Fade Up Right

<div data-aos="fade-up-right"></div>
Mac Image

Fade Up Left

<div data-aos="fade-up-left"></div>
Mac Image

Fade Down Right

<div data-aos="fade-down-right"></div>
Mac Image

Fade Down Left

<div data-aos="fade-down-left"></div>
Mac Image

Flip Animation

Flip Left

<div data-aos="flip-left"></div>
Mac Image

Flip Right

<div data-aos="flip-right"></div>
Mac Image

Flip Up

<div data-aos="flip-up"></div>
Mac Image

Flip Down

<div data-aos="flip-down"></div>
Mac Image

Zoom Animation

Zoom In

<div data-aos="zoom-in"></div>
Mac Image

Zoom In Up

<div data-aos="zoom-in-up"></div>
Mac Image

Zoom In Down

<div data-aos="zoom-in-down"></div>
Mac Image

Zoom In Right

<div data-aos="zoom-in-right"></div>
Mac Image

Zoom In Left

<div data-aos="zoom-in-left"></div>
Mac Image

Zoom Out

<div data-aos="zoom-in"></div>
Mac Image

Zoom Out Up

<div data-aos="zoom-out-up"></div>
Mac Image

Zoom Out Down

<div data-aos="zoom-out-down"></div>
Mac Image

Zoom Out Right

<div data-aos="zoom-out-right"></div>
Mac Image

Zoom Out Left

<div data-aos="zoom-out-left"></div>
Mac Image

Animation Examples

Duration

<div data-aos="fade-up" data-aos-duration="3000"></div>
Mac Image

Easing="linear"

<div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"></div>
Mac Image

Offset

<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine"></div>
Mac Image

Offset

<div data-aos="fade-left" data-aos-offset="500" data-aos-duration="500"></div>
Mac Image

Easing="ease-in-back"

<div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0"></div>
Mac Image

Easing="ease-out-cubic"

<div data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000"></div>
Mac Image
@endsection @section('script') @endsection