Animation on scroll in VUE.JS like wow.js

Question

I want to add animation to some blocks when scroll at my vuejs site, like wow.js

Maybe you now how i can do that? Thanks

Answer 1

I found a good solution, is plugin AOS (Animation On Scroll)

For vue.js you need:

1. npm install --save aos@next OR yarn add aos@next

2. [main.js] import AOS from 'aos';

3. [main.js] import 'aos/dist/aos.css'; // You can also use for styles

4. [main.js] AOS.init(); And then you can add data-attributes for your blocks, like:

   <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
   >   </div>
   

Have a nice day!