AOS

Powering Dynamic Interactions, One Scroll at a Time.

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>

See Also