AOS scrolling animation with VueJS 3

We can use any JavaScript library with Vuejs and its all versions. We can use AOS as well, Animate On Scroll Library with Vue.js 3, and it's super easy to implement. Let's start!

Install AOS

Using npm
```
  npm install aos --save
```

Vue CLI project src/main.js

import { createApp } from 'vue'
import App from './App.vue'

// importing AOS css style globally
import 'aos/dist/aos.css'

const app = createApp(App);

app.mount('#app')

Template part of a component, src/components/HelloWorld.vue

this is just for an example to implement, you can use anything supported by AOS.

<template>
  <div class="hello">

    <!-- card 1 -->
    <div
      data-aos="zoom-in"
      class="card"
      style="width: 18rem; margin: 100px auto;"
    >
      <img
        src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- card 2 -->
    <div
      data-aos="new-animation"
      data-aos-offset="200"
      data-aos-easing="ease-in-out"
      class="card"
      style="width: 18rem; margin: 200px auto;"
    >
      <img
        src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Card 2</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- card  3-->
    <div
      data-aos="fade-right"
      class="card"
      style="max-width: 18rem; margin: 200px auto;"
    >
      <img
        src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Card 3</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- card 4 -->
    <div
      data-aos="fade-left"
      class="card"
      style="width: 18rem; margin: 200px auto;"
    >
      <img
        src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Card 4</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <!-- card 5 -->
    <div
      data-aos="flip-left"
      class="card"
      style="width: 18rem; margin: 200px auto;"
    >
      <img
        src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=889&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Card 5</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import AOS from "aos";

onMounted(() => {
    AOS.init();
})

</script>

Buy Me a Coffee 🙏:
If this article helped you a bit and you'd like to support my work, feel free to buy me a coffee: https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!

Full project code:

AOS Scrolling GitHub

Reference

AOS Docs on GitHub
AOS Demo

Blog

AOS scrolling animation with VueJS 3

Sabbir Sobhani

Install AOS

Vue CLI project src/main.js

Template part of a component, src/components/HelloWorld.vue

Full project code:

Reference

Join Our Newsletter. No Spam, Only the good stuff.

Related