Viho-Animation Aos Animation

New

Emay Walter

Human Resources Department

k
Follow
2 year
Experince
k
Follower

AOS Example animation

Init AOS

// The Below Function is example of how to initlize reveal

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

Check Layout

Sidebar Type

Color Picker

Preview Settings

Try It Real Time

Layout Type

- LTR
- RTL
- Box

Emay Walter

AOS Animation

AOS Example animation

Init AOS

How to use it?

Advanced settings

Animation

Fade animations:

Flip animations:

Slide animations:

Zoom animations:

Anchor placement:

Easing functions:

Preview Settings

Defaul layout

Compact layout

Modern layout

Layout Type

SIDEBAR TYPE

Unlimited Color

Mix Layout

Bookmark

AOS Animation

AOS Example animation

Init AOS

How to use it?

Advanced settings

Animation

Fade animations:

Flip animations:

Slide animations:

Zoom animations:

Anchor placement:

Easing functions:

Preview Settings

Defaul layout

Compact layout

Modern layout

Layout Type

SIDEBAR TYPE

Unlimited Color

Mix Layout