DEV Community

loading...
Cover image for VueJS on scroll animations

VueJS on scroll animations

suvink profile image Suvin Nimnaka ・1 min read

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!

Discussion

pic
Editor guide
Collapse
dario_wd_coding profile image
Dario Presutti

GG thanks man!

Collapse
suvink profile image
Collapse
benyou1969 profile image
Mansour Benyoucef ☕

Thank you, for sharing.

Collapse
suvink profile image
Suvin Nimnaka Author

You're welcome!

Collapse
nsadisha profile image
Sadisha Nimsara

Thank you..
That will help me a lot.

Collapse
suvink profile image
Suvin Nimnaka Author

Youre welcome!