Learn Intersection Observer In 15 Minutes

Intersection Observer is an amazing tool in JavaScript that allows you to easily and efficiently do pretty much anything based on the visibility of elements. This is perfect for scroll animations, lazy loading images, infinite scroll, and much more. Also, Intersection Observer is incredibly performant and flexible which makes it by far the best approach.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:50 - IntersectionObserver Basics
05:20 - IntersectionObserver Options
11:11 - Infinite Scrolling Example

#IntersectionObserver #WDS #JavaScript

[aram]

One of the best tuts on this topic. No bs, great pace. Respect!

[Elenthiriel]

There are 2 things that are absolutely true about your channel and you
1 - You really simplify the web for US
2 - You really helps us build our dream project sooner

You are awesome, love ya ❤

[hermannrudas]

I've passed 4 days trying to get into this topic using different sources once here, Mr Kyle in less than 15 min not only solved all my doubts but i've also learned how to add infinite images using I-Observer.. Thank You very much

[mwdcodeninja]

I love your content. No fluff, through, and with practical use cases. Love it!

[christiansaborio]

4:53 into the video, paused it, and with what you explained I was able to make a shopping cart fixed button appear after the logo of website was scrolled out of sight - great explanation!

[murolem]

wow never heard about this 🙉
this is totally gonna be useful for loading and unloading for big amount of elements

[piyushyadav]

Been looking for this explanation for a while!
I've already used this in production but didn't quite have the understanding that I felt like I should have. Had to frankenstein my way from different tutorials, articles and documentation.

[JordanAF]

Whenever I'm stuck, I can bet money that this channel will have a clear, informative video to help me out. Thanks!

[diogosoares]

Hey Kyle, I just went through the MDN documentation and came to your video only after to consolidate the knowledge. I must say you've put a masterclass on display! Keep up the great work, I love your channel.

[bxnybbp]

Thankyou Kyle now I understand intersection observer, Now I fixed my bug on my scrollspy active nav with fix navbar with the help of threshold adjustments

[DarkSomaX]

Man, this is the second time one of your videos clarified the concepts of JS, the first being the difference between nodes and elements with your cheatsheet, thank you for these videos, they are of great help for someone learning JS from 0 to advanced!

[EmaCovers]

Another day avoiding being fired thanks to tutorials. I love you man, thank you ^^

[said-magomeddzhabrailov]

This video helped me fully understand this API. Thanks

[pykkbgj]

Your blog on this topic of "Intersection Observer API" is phenomenal. NOBODY would have ANY Doubt after calmly reading through that blog... Thank you

[FacePlat]

Soon as I see a JS feature I don't know I clicked 😄. It really helps that you keep focusing on JS specific tutorials becuase it makes me love JS more.

[frankiii]

Thank you so much for this amazing tutorial. I couldn't understand and get to work the foreach method so I used for-of instead. Just a few lines and there's an amazing effect.

[funnylifestyle]

I love how you explain complex staff in a nutshell👏👏👏

[hussainmusthaq]

Highly appreciate your contents. They help me on the daily.

[MarshallBanananana]

This is the fifth video on Intersection Observer I watched and it's the first one, where I'm starting to grasp the concept. Thank you!

[yinonelbaz]

What an amazing feature
I was generally looking for a solution to another problem but it's going to make it easier for me in so many situations
Thank you so much bro for the great explanations and quality content you upload