Scroll Animation using Intersection Observer API
🎯 Scroll Animation using Intersection Observer API
✨ Animating elements onto the screen looks fascinating. There are quite a few libraries to do that but what if you don't want to do it that way? Then you can use JavaScript Intersection Observer API, what it does is tell you if an element in the DOM is visible to the viewport. If an element is intersecting you can apply a CSS class that animates into the DOM.
The approach, is to create the intersection observer, a Class that takes a callback in its Constructor. The cool about this thing is it can observe multiple entries at the same time. This function will run anytime the visibility of one of the observed elements changes because it handles multiple entries. So we need to loop over and run a conditional check to find out if that entry is intersecting the viewport or not. If it's intersecting we'll add animation class/es to it which will make it visible and if we want to show the animation over and over again we need to remove the class/es when it's not intersecting. That's our observer setup.
Now we need to tell the observer what to observe. In this demo, we simply loop over all the [data-animation] elements and pass them to the observer to observe each one of them. That's all the JavaScript code we need. The rest is done by CSS animation.
Have Fun, Cheers! 🍻
🕹 See it in action: https://codepen.io/iamsaief/full/qBYPdGx
💬 Let me know your thoughts about it or share ideas.
#scrollAnimation #intersectionObserverAPI
#csstricks #jstricks #tipsandtricks #html #css #sass #scss #javascript #reactjs #frontend #webdeveloper #frontenddeveloper #javascriptdeveloper
On this page of the site you can watch the video online Scroll Animation using Intersection Observer API with a duration of hours minute second in good quality, which was uploaded by the user Saief Al Emon 22 September 2023, share the link with friends and acquaintances, this video has already been watched 45 times on youtube and it was liked by 0 viewers. Enjoy your viewing!
