Fade
fade-up
fade-down
fade-left
fade-right
fade-up-left
fade-up-right
fade-down-left
fade-down-right
vue
<template>
<b-div data-aos="fade-up">
<p>fade-up</p>
</b-div>
<b-div data-aos="fade-down">
<p>fade-down</p>
</b-div>
<b-div data-aos="fade-left">
<p>fade-left</p>
</b-div>
<b-div data-aos="fade-right">
<p>fade-right</p>
</b-div>
<b-div data-aos="fade-up-left">
<p>fade-up-left</p>
</b-div>
<b-div data-aos="fade-up-right">
<p>fade-up-right</p>
</b-div>
<b-div data-aos="fade-down-left">
<p>fade-down-left</p>
</b-div>
<b-div data-aos="fade-down-right">
<p>fade-down-right</p>
</b-div>
</template>
Flip
flip-left
flip-right
flip-up
flip-down
vue
<template>
<b-div data-aos="flip-left">
<p>flip-left</p>
</b-div>
<b-div data-aos="flip-right">
<p>flip-right</p>
</b-div>
<b-div data-aos="flip-up">
<p>flip-up</p>
</b-div>
<b-div data-aos="flip-down">
<p>flip-down</p>
</b-div>
</template>
Zoom
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-right
zoom-out-left
vue
<template>
<b-div data-aos="zoom-in">
<p>zoom-in</p>
</b-div>
<b-div data-aos="zoom-in-up">
<p>zoom-in-up</p>
</b-div>
<b-div data-aos="zoom-in-down">
<p>zoom-in-down</p>
</b-div>
<b-div data-aos="zoom-in-left">
<p>zoom-in-left</p>
</b-div>
<b-div data-aos="zoom-in-right">
<p>zoom-in-right</p>
</b-div>
<b-div data-aos="zoom-out">
<p>zoom-out</p>
</b-div>
<b-div data-aos="zoom-out-up">
<p>zoom-out-up</p>
</b-div>
<b-div data-aos="zoom-out-down">
<p>zoom-out-down</p>
</b-div>
<b-div data-aos="zoom-out-right">
<p>zoom-out-right</p>
</b-div>
<b-div data-aos="zoom-out-left">
<p>zoom-out-left</p>
</b-div>
</template>
Settings
duration
easing
offset
anchor
anchor
duration
vue
<template>
<b-div
data-aos="fade-up"
data-aos-duration="3000"
>
<p>duration</p>
</b-div>
<b-div
data-aos="fade-down"
data-aos-easing="linear"
data-aos-duration="1500"
>
<p>easing</p>
</b-div>
<b-div
id="example-anchor"
data-aos="fade-right"
data-aos-offset="300"
data-aos-easing="ease-in-sine"
>
<p>offset</p>
</b-div>
<b-div
data-aos="fade-left"
data-aos-anchor="#example-anchor"
data-aos-offset="500"
data-aos-duration="500"
>
<p>anchor</p>
</b-div>
<b-div
data-aos="fade-zoom-in"
data-aos-easing="ease-in-back"
data-aos-delay="300"
data-aos-offset="0"
>
<p>anchor</p>
</b-div>
<b-div
data-aos="flip-left"
data-aos-easing="ease-out-cubic"
data-aos-duration="2000"
>
<p>duration</p>
</b-div>
</template>
Anchor placement
top-bottom
center-bottom
bottom-bottom
top-center
center-center
vue
<template>
<b-div
data-aos="fade-up"
data-aos-anchor-placement="top-bottom"
>
<p>top-bottom</p>
</b-div>
<b-div
data-aos="fade-up"
data-aos-anchor-placement="center-bottom"
>
<p>center-bottom</p>
</b-div>
<b-div
data-aos="fade-up"
data-aos-anchor-placement="bottom-bottom"
>
<p>bottom-bottom</p>
</b-div>
<b-div
data-aos="fade-up"
data-aos-anchor-placement="top-center"
>
<p>top-center</p>
</b-div>
<b-div
data-aos="fade-up"
data-aos-anchor-placement="center-center"
>
<p>center-center</p>
</b-div>
</template>