IntersectionObserver API

This tutorial explains how to use the new IntersectionObserver API from HTML5. It allows you to determine when elements are entering or leaving the screen. You can figure out when elements are touching each other. You can define areas of the screen which will act as triggers for other code.
Sample Code GIST: gist.github.com/prof3ssorSt3v...

[@kingnonnnnn]

some of the best explaining tutorials about js. you deserve way more views and subscriptions! keep up the good work Steve.

[@DheerajKumar-di1cv]

Agreed with you @marco. Its A+

[@makhloufioussama4983]

Thank you for this.the Best explanation of intersectionObserver on youtube.good luck

[@Vemovemo1]

This tutorial is simply... AMAZING.

[@norithegoldendoodle8931]

Two words! FANTASTIC TUTORIAL!

[@simonthordal303]

One of the most informative tutorials I've ever watched on js. Subscribed and rung that bell. Keep it up!

[@gandalfsnowgrey7037]

This is so clearly explained and put into examples! Thank you for this!

[@drey9003]

Tanks you a lot ! I'd like to say i was following a french tutorial on the same topic but it appears something was not working for me and some viewers, but yours is perfect ! It helped me !

[@iwswordpress]

Very well explained for an intricate subject. Thanks for gists too!

[@wklo7159]

Thx. So well explained in a way that is structured and easy to understand. Every detail is introduced at the right place and at the right time.

[@TheLucidway]

Superb instruction. Thank you, Steve!

[@deedeer8678]

Thank you Steve! It is the tutorial I've been looking for! Subscribed and thumb up!

[@christosa.filippopoulosneo7185]

Thank you, Sir, your explanation was so accurate it helped me a lot, to understand how this works, when someone asks me about this or other JavaScript-related topics I will refer people to your channel.

[@lukasluftlaufer1093]

Wow. What a clear and simple explanation! Thanks a lot :)

[@Hungry_for_exploration]

Omg I just watched the whole video, you saved my life, this is exactly what I needed.

[@CarloNyte]

Thank you for taking the time to make this

[@iwswordpress]

Well presented - has gist page too - well researched. Would not have known about this API. I am a subscriber and watch out for your videos. Keep up the great work! thanks.

[@srinivasaraoyp3640]

Very nicely explained. Thank you very much.

[@marcoio8742]

Finally, I understand Intersection Observer. Thank you very much! I might be the only one but you do sound like Bryan Cranston. Amazing!

[@uLise4Life]

after 3 days of struggling to understand and find a good video about this . i finally found one and understand it on the fly. gj. like subscribe. :D

[@fraserlock-macardy9633]

Thanks for making this video, It's really helped my studies.

[@yag7769]

Your voice and your pedagogy are delicious, Big Up

[@moddoora3876]

amazing .. i enjoy your way of teaching

[@patrykchrobak7107]

Great work! Thank You!

[@iwswordpress]

Very good and clear. A very usseful API.

[@UtkarshSrivastava03]

Thanks!!! It is very helpful for a beginner

[@hassanaguezoum3477]

you make it simple for me thank you

[@sam-ir8wx]

You saved my time

[@joshuamichael845]

You are awesome. God bless you 🙏

[@amircahyadi9219]

👍 nice explaining ❤️

[@technicalmind8541]

Thank you sooo much Sir. This video is really helpful for me. Thanks

[@growingisgood]

Amazing video !

[@codeblooded6760]

Great video!

[@konghu7642]

i love your video! as well as your voice

[@kirillbaryba746]

Thanks man, cool

[@havefun5519]

Greate tut and love the soft voice

[@ismail-talb]

you are awesome ,as always

[@radovansurlak7445]

thank you Steve! :)

[@tetiana_komar]

Thank you, Steve!

[@SteveGriffith-Prof3ssorSt3v3]

You're welcome Tetyana

[@mridulkhurana533]

excellent thanks !

[@Gobbenobber]

Nice tutorial :D Sub'd!

[@mania-_-]

Thank you!!!

[@Colstonewall]

The Jimmy Page of Javascript! The Maestro. . .

[@halloween897g2]

Thanks!

[@camilogarcia1325]

Great explanation! thanks for sharing this! you should make asmr programming videos too! LOL

[@SteveGriffith-Prof3ssorSt3v3]

😀

[@squeezemylizard6571]

nice one

[@kimosapien4344]

You are such a great teacher, thank you so much for sharing your knowledge in such a concise way. One unrelated question: why do you use Avast? :)

[@SteveGriffith-Prof3ssorSt3v3]

I have used several different anti virus programs over the years on different computers

[@amrosaad9730]

thanks ;)

[@emmanuelcudjoe305]

Perfect :)

[@easttechsolutions3695]

life saver🙂

[@CastleShield]

thanks

[@anthonyzornig]

Top! works seemless… after a bit of patience with my code :)

[@youvegotmail9385]

This guy needs to be the next David Attenborough, but American edition.

[@SteveGriffith-Prof3ssorSt3v3]

Canadian edition. 😀

[@youvegotmail9385]

@@SteveGriffith-Prof3ssorSt3v3 Dammit! Luckily, we love our Canadian neighbors so I'll take it.

[@sourishdutta9600]

WOW!!!!

[@romanmontoya5950]

Wonderful tutorial! Quick question: in the line entry.target.classList.add('active'); isn't each entry an HTML element from the entry array? What is 'target' doing? You mention that 'target' is the actual HTML element, so I'm a confused. Thanks!

[@romanmontoya5950]

never mind, I answered my own question by logging 'entry' to the console and carefully looking at the various properties on it.

[@mohamedrezk231]

Thanks for detailed explanation, but I don't understand what "ob" parameter in "beTouching" function represents

[@SteveGriffith-Prof3ssorSt3v3]

It is the Observer object that is created on line 233.

[@kts.laraveldeveloper7646]

if 2 elements are in viewport,then how to handle them? i m using intersection observer for videos.i want to play one video and pause the second one if they are in viewport how to achieve this?please help sir...

[@ashharkausar413]

Steve I noticed when I try to do something like : function beTouching(entries){ if(entries.isIntersecting){ console.log('intersected'); } else { console.log('not intersected'); } } It doesn't work, it only works in the foreach loop, do you know why that is?

[@SteveGriffith-Prof3ssorSt3v3]

Entries is an array.

[@ashharkausar413]

@@SteveGriffith-Prof3ssorSt3v3 ty

[@Hungry_for_exploration]

Thanks so much for this it helped me understand this a bit more. Am a beginner and am working on a project that requires the use of this API. Can you help me out please. So my problem is that ( I have multiple sections on my page and I want to add an active class to each one of them when they're are in viewport, and toggle the class when it's not in viewport. )

[@SteveGriffith-Prof3ssorSt3v3]

What you are describing is pretty much what I do in the video.

[@Hungry_for_exploration]

@@SteveGriffith-Prof3ssorSt3v3 I finally got my code to work using the getBoundingClientRect() method. I find it way easier than this method. But great video man.