Loading...
  • Bonus Ui
    Mega menu
    Error Page
    • Error page 400
    • Error page 401
    • Error page 403
    • Error page 404
    • Error page 500
    • Error page 503
    Authentication
    • Login
    • Login with image
    • Login with validation
    • Sign Up
    • SignUp with image
    • SignUp with image
    Usefull Pages
    • Search Website
    • Unlock User
    • Forget Password
    • Reset Password
    • Maintenance
    • Login validation
    Email templates
    • Basic Email
    • Basic With Header
    • Ecomerce Template
    • Email Template 2
    • Ecommerce Email
    • Order Success
    Coming Soon
    • Coming-soon
    • Coming-video
    • Coming-Image
    Other Soon
    • Sample Page
  • Level Menu
    • File manager
    • Users
      • User Profile
      • User Edit
      • Users Cards
    • Kanban Board
    • Bookmark
    • Social App
  • en
    English (US)
    Deutsch
    Español
    Français
    Português (BR)
    简体中文
    لعربية (ae)
  • 4
    • Notitications
    • Delivery processing 10 min.

    • Order Complete1 hr

    • Tickets Generated3 hr

    • Delivery Complete6 hr

    • Check all notification
    • Bookmark
  • 2
    • Shoping Bag
    • V-Neck Shawl Collar Woman's Solid T-Shirt

      Yellow(#fcb102)

      $299.00
    • V-Neck Shawl Collar Woman's Solid T-Shirt

      Yellow(#fcb102)

      $299.00
    • Order Total : $598.00
    • Go to shoping bagCheckout
    • Message Box
    • Erica Hughes

      Lorem Ipsum is simply dummy...

      58 mins ago

    • Kori Thomas

      Lorem Ipsum is simply dummy...

      1 hr ago

    • Ain Chavez

      Lorem Ipsum is simply dummy...

      32 mins ago

    • View All
  • Emay Walter

    Admin

    • Account
    • Inbox
    • Taskboard
    • Settings
    • Log in
  • Back
  • General

    Dashboards,widgets & layout.

  • Dashboards
    • Default
    • Ecommerce
  • Widgets
    • General
    • Chart
  • Applications

    Ready to use Apps

  • Project
    • Project List
    • Create new
  • File manager
  • Kanban Board
  • Ecommerce
    • Product
    • Product page
    • Product list
    • Payment Details
    • Order History
    • Invoice
    • Cart
    • Wishlist
    • Checkout
    • Pricing
  • Email
    • Email App
    • Email Compose
  • Chat
    • Chat App
    • Video chat
  • Users
    • Users Profile
    • Users Edit
    • Users Cards
  • Bookmarks
  • Contacts
  • Tasks
  • Calendar
  • Social App
  • To-Do
  • Search Result
  • Forms & Table

    Ready to use froms & tables

  • Forms
    • Form Controls
      • Form Validation
      • Base Inputs
      • Checkbox & Radio
      • Input Groups
      • Mega Options
    • Form Widgets
      • Datepicker
      • Timepicker
      • Datetimepicker
      • Daterangepicker
      • Touchspin
      • Select2
      • Switch
      • Typeahead
      • Clipboard
    • Form layout
      • Default Forms
      • Form Wizard 1
      • Form Wizard 2
      • Form Wizard 3
      • Form Wizard 4
  • Tables
    • Bootstrap Tables
      • Basic Tables
      • Sizing Tables
      • Border Tables
      • Styling Tables
      • Table components
    • Data Tables
      • Basic Init
      • Advance Init
      • Styling
      • AJAX
      • Server Side
      • Plug-in
      • API
      • Data Sources
    • Ex. Data Tables
      • Auto Fill
      • Basic Button
      • Column Reorder
      • Fixed Header
      • HTML 5 Export
      • Key Table
      • Responsive
      • Row Reorder
      • Scroller
    • Js Grid Table
  • Components

    UI Components & Elements

  • Ui Kits
    • State color
    • Typography
    • Avatars
    • helper classes
    • Grid
    • Tag & pills
    • Progress
    • Modal
    • Alert
    • Popover
    • Tooltip
    • Spinners
    • Dropdown
    • Accordion
    • Tabs
      • Bootstrap Tabs
      • Line Tabs
    • Shadow
    • Lists
  • Bonus Ui
    • Scrollable
    • Tree view
    • Bootstrap Notify
    • Rating
    • dropzone
    • Tour
    • SweetAlert2
    • Animated Modal
    • Owl Carousel
    • Ribbons
    • Pagination
    • Steps
    • Breadcrumb
    • Range Slider
    • Image cropper
    • Sticky
    • Basic Card
    • Creative Card
    • Tabbed Card
    • Draggable Card
    • Timeline
      • Timeline 1
      • Timeline 2
  • Builders
    • Form Builder 1
    • Form Builder 2
    • Page Builder
    • Button Builder
  • Animation
    • Animate
    • Scroll Reveal
    • AOS animation
    • Tilt Animation
    • Wow Animation
  • Icons
    • Flag icon
    • Fontawesome Icon
    • Ico Icon
    • Thimify Icon
    • Feather icon
    • Whether Icon
    • Simple line Icon
    • Material Design Icon
    • pe7 icon
    • Typicons icon
    • Ionic icon
  • Buttons
    • Default Style
    • Flat Style
    • Edge Style
    • Raised Style
    • Button Group
  • Charts
    • Apex Chart
    • Google Chart
    • Sparkline chart
    • Flot Chart
    • Knob Chart
    • Morris Chart
    • Chatjs Chart
    • Chartist Chart
    • Peity Chart
  • Pages

    All neccesory pages added

  • Sample page
  • Internationalization
  • Others
    Error Page
    • Error 400
    • Error 401
    • Error 403
    • Error 404
    • Error 500
    • Error 503
    Authentication
    • Login Simple
    • Login with bg image
    • Login with image two
    • Login With validation
    • Login with tooltip
    • Login with sweetalert
    • Register Simple
    • Register with Bg Image
    • Register with Bg video
    • Register wizard
    • Unlock User
    • Forget Password
    • Reset Password
    • Maintenance
    Coming Soon
    • Coming Simple
    • Coming with Bg video
    • Coming with Bg Image
    Email templates
    • Basic Email
    • Basic With Header
    • Ecomerce Template
    • Email Template 2
    • Ecommerce Email
    • Order Success
  • Miscellaneous

    Bouns pages & apps

  • Gallery
    • Gallery Grid
    • Gallery Grid Desc
    • Masonry Gallery
    • Masonry with Desc
    • Hover Effects
  • Blog
    • Blog Details
    • Blog Single
    • Add Post
  • FAQ
  • Job Search
    • Cards view
    • List View
    • Job Details
    • Apply
  • Learning
    • Learning List
    • Detailed Course
  • Maps
    • Maps JS
    • Vector Maps
  • Editors
    • Summer Note
    • CK editor
    • MDE editor
    • ACE code editor
  • Knowledgebase
  • Support Ticket

AOS Animation

  1. Animation
  2. AOS Animation
AOS Example animation
Image description
Image caption 1
Image description
Image caption 2
Image description
Image caption 3
Image description
Image caption 4
Image description
Image caption 5
Image description
Image caption 6
Image description
Image caption 7
Image description
Image caption 8
Image description
Image caption 9
Image description
Image caption 10
Image description
Image caption 11
Image description
Image caption 12
Image description
Image caption 13
Image description
Image caption 14
Image description
Image caption 15
Image description
Image caption 16
Image description
Image caption 17
Image description
Image caption 18
Image description
Image caption 19
Image description
Image caption 20
Image description
Image caption 21
Image description
Image caption 22
Image description
Image caption 23
Image description
Image caption 24
Image description
Image caption 25
Image description
Image caption 26
Image description
Image caption 27
Image description
Image caption 28
Image description
Image caption 29
Image description
Image caption 30
Image description
Image caption 31
Image description
Image caption 32
Image description
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

Copyright 2021 © Cuba theme by pixelstrap