How to Use AOS in a Vue Project demo repo

AOS 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 needed in src/main.js.
import AOS from "aos";
import "aos/dist/aos.css";

new Vue({
  created() {
    AOS.init({ disable: "phone" });
  },
  router,
  render: h => h(App)
}).$mount("#app");
  1. Use AOS, e.g. in src/views/aos.vue.
<template>
  <div>
    <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="https://twitter.com/michalsnik">
        Michał Sajnóg
      </a>
      😄
    </p>

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

    <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
      animating.
    </p>

    <hr class="my-5" />

    <ul class="list-unstyled row">
      <li
        v-for="(item, index) in img"
        :key="index"
        data-aos="fade-up"
        data-aos-delay="500"
        data-aos-once="true"
        class="align-items-center col-sm-6 d-flex flex-column justify-content-center mb-5"
      >
        <img :src="getImg(item)" class="img-fluid mr-3" />

        <div class="">
          <h2 class="h4">{{ item }}</h2>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: ["Animals", "Arch", "Nature", "People", "Tech"]
    };
  },
  methods: {
    getImg(name) {
      return "https://placeimg.com/400/225/" + name.toLowerCase();
    }
  }
};
</script>

📖 Explanation

  • Use animations with data-aos attribute.

  • Adjust the behavior with data-aos-* attributes.

    • delay delays the animation start time. Both this and duration accept values 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: 6/21/2019, 2:32:45 AM