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'

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!