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 👇
Medium
Ps. In the comments you will find the friends link if you have finished your monthly view on Medium ✌️❤️
Top comments (1)
medium.com/notonlycss/how-to-trigg...