A very simplified guide on the Intersection Observer API, with examples

While there are many libraries out there for intersection animations, you can also use the INTERSECTION OBSERVER API in JavaScript. This API allows you to observer intersections of elements, and trigger things like transitions, lazy-loading and lots more.
In this video, I help you understand how this API works, and show you some transition examples.
Codepen link: codepen.io/Dillion/pen/abXyZKw
Helpful resources:
* Visibility vs Display: • DISPLAY:NONE and VISIB...
_____
Subscribe to My Channel: bit.ly/deeecode
_____
🌟 About Me:
Dillion Megida, creator of DEEECODE, is a Software Engineer, Developer Advocate and a Content Creator passionate about simplifying topics around Tech via articles and videos.
_____
⚡️ Connect with me:
- Personal youtube: / dillionmegida
- Personal website: dillionmegida.com/
- Twitter: / iamdillion
- Instagram: / deeecode
- LinkedIn: / dillionmegida
- GitHub: github.com/dillionmegida

[@user-xx6wy1xr1v]

You are a next best Web development commentator. Excellent explanation. I didn't just get a clarity on a Intersection Observer subject, but on other CSS classes. Thanks for your efforts.

[@bigshuff]

Mate that was really good watched it several times now. Thanks

[@deeecode]

Glad you enjoyed it

[@benficafutbol4651]

Really well explained, I was struggling to understand the options, and you cleared it up really well. Thank you.

[@lvekua]

Awesome guide! thank you!

[@deeecode]

Glad you enjoyed it!

[@fnfal113]

great vid!

[@escaparatevisual]

Awesome stuff! Thank you for sharing!

[@deeecode]

You're very welcome!

[@CLeovison]

Thankyouu so muuuch for early christmas gift, i have been waiting for this. ❤️❤️

[@deeecode]

I'm so glad to hear. Let me know what you build with this :)

[@BlackPlavy]

Great video, thanks!

[@deeecode]

You’re welcome :)

[@PhucTran-zj5is]

Thanks for your help bro. Keep it up ❤

[@deeecode]

You're very welcome!

[@marializa505]

Excellent information, thank you so much for explaining in a way that's easy to understand! :)

[@deeecode]

I'm so glad to hear

[@princeweb1]

Thank you :)

[@deeecode]

You're welcome!

[@FumezCreates]

Excellent Video

[@deeecode]

Glad you enjoyed it

[@nomeconfundas]

thanks for this great video bro! I would like to check a case with responsive design with lets say some rows with images that in desktop have for example 4 images but in mobile only 2. how would the load behaviour be in both or even more cases like this?

[@HelloWorld17th]

Really awesome video 📸🎉🎉...

[@deeecode]

Glad you enjoyed it

[@cratortech3d472]

Awesome

[@deeecode]

You're welcome!

[@LokiDaFerret]

Hmmmm. Can I specify the root margin in terms of viewport units like VH? It seems like that would be much more practical since 100px is a very small amount on a very big device. Whereas 100px is a very large amount on an old device like an iPhone 3.

[@user-kt7uk9cq7c]

iam surprised how threshold property will access by entries parameter, what is the reason behind it and in callback function another parameter also we can put that is observer like this
const obsCallback = function (entries, observer) {
entries.forEach(entry => {
console.log(entry);
});
};
const obsOptions = {
root: null,
threshold: 0.2,
};
const observer = new IntersectionObserver(obsCallback, obsOptions);
observer.observe(section1);
but another doubt how observer will as parameter ok if it has parameter then how internally thread will execute this code (javaScript runs on single thread only right.....) please explain how thread will execute this
I researched alot but i never find how this will works internally every article and every vedio explained like this only
please reply me with answer

[@Sagarclips]

Please provide source code

[@deeecode]

Sorry, I forgot to include it in the video description...here it is: codepen.io/Dillion/pen/abXyZKw

[@user-sb9mt9ip1f]

great job bro , liked it.....

[@deeecode]

I'm glad