How To Trigger a Scroll Event in Vue.js With the IntersectionObserver

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

Luca Spezzano
Published in
4 min readFeb 16, 2021


Photo by Priscilla Du Preez on Unsplash

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.

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.

Browser Support

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.



Luca Spezzano

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.