DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How To Trigger a Scroll Event in Vue.js
Luca Spezzano
Luca Spezzano

Posted on

How To Trigger a Scroll Event in Vue.js

Animate your pages when an element is visible in the viewport with pure JavaScript

In my experience as a frontend developer, one of the things that I often develop are animations on the scrolling of the pages.
My approach to this type of development has changed over the years.

At first, I used the scroll event in JavaScript, but on the performance side, I realized that it was not a great way to trigger an event every time the user scrolled the page.

Later I decided to use external libraries like ScrollMagic, wow.js, AOS etc.
I was always happy with the result (even if they were limited to animate), but nowadays the performances of a website are very important, so I asked myself, do I really need external libraries to create simple effects on the scroll? They add weight to the bundle size.

What I use today when I have to run animations or trigger events on the scroll of the pages is the Intersection Observer API.

Today we are going to develop a component in Vue.js, which will take care to trigger an event when it is visible in the viewport.

I have prepared a demo and you can have a look here πŸ‘‡

Check out the full article on Medium πŸ‘‡

Ps. In the comments you will find the friends link if you have finished your monthly view on Medium ✌️❀️

Top comments (1)

Collapse
 
93lucasp profile image
Luca Spezzano Author

What image format should you use in your next project? πŸ€”