Example
fade-up
fade-down
fade-left
fade-right
flip-left
flip-right
zoom-in
zoom-up
vue
<template>
<b-div
data-aos="fade-up"
background-color="primary"
margin="b-5"
class="un-h-60vh"
text-color="white"
align-items="center"
justify-content="center"
display="flex"
font-size="1"
>
<p>fade-up</p>
</b-div>
<b-div
data-aos="fade-down"
background-color="primary"
margin="b-5"
class="un-h-60vh"
text-color="white"
align-items="center"
justify-content="center"
display="flex"
font-size="1"
>
<p>fade-down</p>
</b-div>
<b-div
data-aos="fade-left"
background-color="primary"
margin="b-5"
class="un-h-60vh"
text-color="white"
align-items="center"
justify-content="center"
display="flex"
font-size="1"
>
<p>fade-left</p>
</b-div>
<b-div
data-aos="fade-right"
background-color="primary"
margin="b-5"
class="un-h-60vh"
text-color="white"
align-items="center"
justify-content="center"
display="flex"
font-size="1"
>
<p>fade-right</p>
</b-div>
<b-div
data-aos="flip-left"
background-color="primary"
margin="b-5"
class="un-h-60vh"
text-color="white"
align-items="center"
justify-content="center"
display="flex"
font-size="1"
>
<p>flip-left</p>
</b-div>
<b-div
data-aos="flip-right"
background-color="primary"
margin="b-5"
class="un-h-60vh"
text-color="white"
align-items="center"
justify-content="center"
display="flex"
font-size="1"
>
<p>flip-right</p>
</b-div>
<b-div
data-aos="zoom-in"
background-color="primary"
margin="b-5"
class="un-h-60vh"
text-color="white"
align-items="center"
justify-content="center"
display="flex"
font-size="1"
>
<p>zoom-in</p>
</b-div>
<b-div
data-aos="zoom-up"
background-color="primary"
margin="b-5"
class="un-h-60vh"
text-color="white"
align-items="center"
justify-content="center"
display="flex"
font-size="1"
>
<p>zoom-up</p>
</b-div>
</template>