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!
Top comments (1)
thanks a lot sabir❤❤ saved me good time