DEV Community

Cover image for VueJS on scroll animations
Suvin Nimnaka
Suvin Nimnaka

Posted on

VueJS on scroll animations

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'
Enter fullscreen mode Exit fullscreen mode

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()
}
Enter fullscreen mode Exit fullscreen mode

After initializeing AOS, my new Vue looks like this.

new Vue({
  created () {
    AOS.init()
  },
  render: h => h(App),
}).$mount('#app');
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

You can find a list on animations with demos here. That's it. Enjoy!

Top comments (10)

Collapse
 
dario_wd_coding profile image
Dario Presutti

GG thanks man!

Collapse
 
suvink profile image
Suvin Nimnaka

Youre welcome!

Collapse
 
benyou1324 profile image
Mansour Benyoucef β˜•

Thank you, for sharing.

Collapse
 
suvink profile image
Suvin Nimnaka

You're welcome!

Collapse
 
pickmanmurimi profile image
Pickman Murimi

Legit good!! Good work man.

Collapse
 
suvink profile image
Suvin Nimnaka

Thank you!

Collapse
 
derickongeri profile image
Derick Ongeri

This was really helpful. Thanks man!

Collapse
 
sheikhrashed profile image
Sheikh Rashed

how to add this on nuxt js ? please anyone

Collapse
 
nsadisha profile image
Sadisha Nimsara

Thank you..
That will help me a lot.

Collapse
 
suvink profile image
Suvin Nimnaka

Youre welcome!