How To Trigger a Scroll Event in Vue.js With the IntersectionObserver
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.
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.
I read an interesting article that explains the difference in performance between the scroll listener and the Intersection Observer that I recommend you to read to understand better its potential.
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.
What can you do with the Intersection Observer API?
You can observe changes in the intersection of an element with the document’s viewport.
I don’t want to go deeper into this topic because I want to focus more on the practice, but you can read more here.
The Intersection Observer is supported by the most used browsers, you can check the list here.
Now let’s start creating our component.
We will use some class of TailwindCSS in this example.