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/Dil...
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....
Twitter: / iamdillion
Instagram: / deeecode
LinkedIn: / dillionmegida
GitHub: github.com/dil...

[@AcademicStars]

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.

[@Pixelyze-tech]

I personally appriacte how you explain the code and make it easier to understand the logic behind this.

[@deeecode]

I'm glad to hear this was helpful

[@gt_n1722]

This is an excellent video; simple and easy to understand. Thank you!

[@benficafutbol4651]

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

[@TyMayor-p3j]

So nice to watch. Keep the good work bro

[@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 :)

[@bigshuff]

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

[@deeecode]

Glad you enjoyed it

[@uppaarrwala]

Great video man!!!

[@marializa505]

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

[@deeecode]

I'm so glad to hear

[@shehnazameer1209]

that was great help. Thank you

[@deeecode]

You're welcome!

[@sabbirahamed7050]

That is a very well explanation.

[@lvekua]

Awesome guide! thank you!

[@deeecode]

Glad you enjoyed it!

[@sahilsaiyad-d3j]

great job bro , liked it.....

[@deeecode]

I'm glad

[@jmdev31584]

Great content! Keep it up!

[@PhucTran-zj5is]

Thanks for your help bro. Keep it up ❤

[@deeecode]

You're very welcome!

[@escaparatevisual]

Awesome stuff! Thank you for sharing!

[@deeecode]

You're very welcome!

[@BlackPlavy]

Great video, thanks!

[@deeecode]

You’re welcome :)

[@Sameena-iz7uq]

Well explain. Salute

[@HelloWorld17th]

Really awesome video 📸🎉🎉...

[@deeecode]

Glad you enjoyed it

[@fnfal113]

great vid!

[@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?

[@FumezCreates]

Excellent Video

[@deeecode]

Glad you enjoyed it

[@princeweb1]

Thank you :)

[@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.

[@cratortech3d472]

Awesome

[@deeecode]

You're welcome!

[@PremrajPadakanti]

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

[@marcrodier8652]

wow a hole javascript program without a single semicolon how did you dun miss that.

[@deeecode]

😂

[@Sagarclips]

Please provide source code

[@deeecode]

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

[@skillradius9867]

riyal

[@colindante5164]

Why is it on page reload entries.length takes into account all entries being observed but as the user scrolls down the page and the callback function gets called, entries.length will always equal to one.? Would anyone care to explain? Thanks

[@TyMayor-p3j]

So nice to watch. Keep the good work bro