Loading...
gif
Don't Miss Out! Out new update has been release.
gif
Something you love is now on sale!
Buy now !
  • EN
    English (US)
    Deutsch
    Español
    Français
    Português (BR)
    简体中文
    لعربية (ae)
  • Bookmark
    • Forms
      Profile
      Tables
    • Add New Bookmark
    • Back
  • 2
    Cart
    • Furniture Chair for Home
      $500
    • Furniture Chair for Home
      $500.00
    • Order Total : $1000.00
    • Go to your cartCheckout
  • 4
    Notitications
    • Delivery processing 10 min.

    • Order Complete1 hr

    • Tickets Generated3 hr

    • Delivery Complete6 hr

    • Check all
  • Emay Walter

    Admin

    • Account
    • Inbox
    • Taskboard
    • Settings
    • Log out
  • Back
  • General
  • Dashboard
    • Default
    • Ecommerce
    • Online course
    • Crypto
    • Social
  • Widgets
    • General
    • Chart
  • Page layout
    • Boxed
    • RTL
    • Dark Layout
    • Hide Nav Scroll
    • Footer Light
    • Footer Dark
    • Footer Fixed
  • Applications
  • 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
  • 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
  • Tables
    • Bootstrap Tables
      • Basic Tables
      • Table components
    • Data Tables
      • Basic Init
      • API
      • Data Sources
    • Ex. Data Tables
    • Js Grid Table
  • Components
  • Ui Kits
    • 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
    • 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
  • Buttons
    • Default Style
    • Flat Style
    • Edge Style
    • Raised Style
    • Button Group
  • Charts
    • Echarts
    • Apex Chart
    • Google Chart
    • Sparkline chart
    • Flot Chart
    • Knob Chart
    • Morris Chart
    • Chatjs Chart
    • Chartist Chart
    • Peity Chart
  • Pages
  • Landing page
  • Sample page
  • Internationalization
  • Starter kit
  • 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 Image Two
    • Register with Bg Image Two
    • 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
  • 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 2022 © Cuba theme by pixelstrap