At some point during a project, we all need to add some extra add-ons to the website to impress the client! So on scroll animations comes handy at this time. Animate On Scroll (AOS) is an awesome and easy to use library for that. Let's see how we can use this with VueJS.
First we need to install AOS.
npm install aos --save
or yarn add aos
on your terminal.
And then we need to import AOS into out main JavaScript file.
Open your main.js
file and add the following.
import AOS from 'aos'
import 'aos/dist/aos.css'
Now after importing, we need to initialize AOS.
To do this, you need to add the following init
function into your new Vue
instance.
created () {
AOS.init()
}
After initializeing AOS, my new Vue
looks like this.
new Vue({
created () {
AOS.init()
},
render: h => h(App),
}).$mount('#app');
Now you have completed the setup! All you have to do is, add data-aos="animation_name"
attribute to whatever the HTML
element you want to animate and it will work like a charm.
Eg:
<div data-aos="fade-up">
<h1>Hello Dev Community!</h1>
</div>
You can find a list on animations with demos here. That's it. Enjoy!
Top comments (10)
GG thanks man!
Youre welcome!
Thank you, for sharing.
You're welcome!
Legit good!! Good work man.
Thank you!
This was really helpful. Thanks man!
how to add this on nuxt js ? please anyone
Thank you..
That will help me a lot.
Youre welcome!