How to Use AOS in a Nuxt Project demo repo

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

# 👣 Steps

Create a Nuxt project and install AOS.

npx create-nuxt-app nuxt-demo
cd nuxt-demo
npm i aos@next

Create AOS plugin and pass the options (opens new window) needed in plugins/aos.client.js.

import AOS from "aos";

import "aos/dist/aos.css";

export default ({ app }) => {
  app.AOS = new AOS.init({ disable: "phone" }); // eslint-disable-line new-cap
};

export default {
  plugins: ["@/plugins/aos.client"]
};

Use AOS, e.g. in pages/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" />

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

        <h2 class="h4">{{ item }}</h2>
      </b-col>
    </b-row>
  </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 (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.

Bootstrap →