How to Use AOS in a Vue Project demo repo

AOS (opens new window) is a CSS-Driven “On Scroll” animation library.

# 👣 Steps

  1. Create a Vue project and install AOS.
npm i -g @vue/cli
vue create vue-demo
cd vue-demo
npm i aos@next
  1. Initialize AOS and pass the options (opens new window) needed in src/main.js.
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);

import AOS from "aos";
import "aos/dist/aos.css";
app.AOS = new AOS.init({ disable: "phone" });

  1. Use AOS, e.g. in src/views/aos.vue.
    <h1 data-aos="fade">AOS Demo</h1>

    <p data-aos="flip-up" data-aos-duration="1000">
      AOS is awesome! Thank you
      <a class="anchor" href="">
        Michał Sajnóg

    <p data-aos="slide-up" data-aos-easing="ease">
      Paragraph with fade up animation and <code>ease</code> easing.

    <p data-aos="zoom-in" data-aos-anchor=".anchor">
      Paragraph with fade down animation with the above link as anchor. This
      makes this paragraph animate before the previous paragraph starts

    <hr class="my-5" />

    <ul class="list-unstyled row">
        v-for="(item, index) in img"
        class="align-items-center col-sm-6 d-flex flex-column justify-content-center mb-5"
        <img :src="getImg(item)" class="fluid mb-3 mr-3" />

        <h2 class="h4">{{ item }}</h2>

export default {
  data() {
    return {
      img: ["Animals", "Arch", "Nature", "People", "Tech"]
  methods: {
    getImg(name) {
      return "" + name.toLowerCase();

# 📖 Explanation

  • Use animations (opens new window) with data-aos attribute.
  • Adjust the behavior (opens new window) with data-aos-* attributes.
    • delay delays the animation start time. Both this and duration accept values (opens new window) from 50 to 3000, with step 50ms.
    • once limits the animation to fire only once.
    • duration sets how long the animation lasts.
    • easing is for changing the transition function.
    • anchor makes another element triggers the animation.
Last updated: 11/1/2020, 3:28:11 PM