Introduction to the Intersection Observer JavaScript API

hi there my name is Kevin and welcome to this video where we're gonna be looking at intersection observers you guys have been asking for some JavaScript and we're finally doing some after a long time if not having done any so that is pretty exciting just if you don't know what intersection observers are they're really they're an API that we can link into that lets us observe when things intersect with the page which or with the viewport I should be saying so this is actually going to be the start of a series where we're gonna be looking at intersection observer and we're going to be seeing the cool and fun stuff you can do with it you can see some of those things on the screen now where you know the the navigation that changes once you scroll down to a certain point images that slide in there's of course lazy loading of images and something else that isn't in this example here that we're gonna be looking at as well it's gonna be a really fun series over the next few weeks but in those videos I don't want to be focusing on how intersection observer is working and exactly how to set it up I want to just put those things into action so this video is the theory this is the one where we learn how intersection observer works how we can control it all the different options we have with it and then after that in those videos we're just gonna take advantage of that to do the really cool stuff before we get into the nitty-gritty of the video I just want to say thank you to Skillshare for sponsoring at this video you probably already know about Skillshare because I've talked with them a few times already but just in case you don't they're a massive online learning community with over 25,000 classes and it's in things like UI UX web development business and tons and tons of other stuff I stumbled across a video this week called creative coding which is looking at doing simple animations SVG animations using CSS and I don't know about you but I think that's really really cool and awesome but my favorite thing about it was at the very end of the course the instructor she gives you access to like five or six SVG's that you can practice on beyond what like following along in the the videos that she had before that so it's really nice cuz you don't have to scour the internet to try and practice you know you don't want to go and hunt down SVG's and vectors so she gives you a bunch that will work really well and you can do some fun and cool stuff with so that would you know it's a nice way to help reinforce the learning once you're done with it so not only are there really really awesome courses out there on Skillshare that are in what we are doing and what you're here to learn with coding and front-end development and all of that but it's also super affordable if you have an annual membership it's less than ten dollars a month which is just really really cool awesome which is just crazy because their library of courses is so big so it's really really cool but not only that if you use the link that's in the description below and it's the first thing that's right down there you get your first two months for free it gives you a lot of time to explore their library and your full access to the library there's no limitations on that trial whatsoever so use that link down there get two months for free joint over seven million other people that are already on Skillshare which is also really really crazy and yeah go and check them out so thank you that thank you for skill sure once again for sponsoring this video now let's go and check out what you're here for which is intersection observers alright so here we are in vs code now I'm also put the dev tools over on the side here so AVS code my browser and the dev tools just cuz this is gonna come really in handy to be able to understand exactly what's going on in the page itself I just have these different sections set up and you can see this sort of weird box thing I'm doing and this is our simulated viewport so it's not a real viewport it's a simulated one we're gonna be we're gonna be pretending this is our viewport as we're working just so we can understand exactly how the intersection observer is working well we're what we're doing stuff in here so I mean my JavaScript file here everything is already linked up and everything so the first thing we're gonna do is just make an observation observer for the first section I have here so each one of these is a different section we're going to but first for only the first one and then we're gonna look at how we can modify that to work for all of our different once in here so let's do a Const of section 1 is equal to document dot weary selector and my selector the class on there I have is just section 1 like that so we're looking at our section 1 and now the now we want to create our observer so I'm going to create another one here so I'm a goob Const observer so the observer here it doesn't have to be observer every demo you look at will be observer we're gonna see when I dive more into it that we can come up with several different ones so you name it what you want but what's important is we create this as a new intersection observer so I have my new intersection observer and what we're going to be doing here and how the intersection observer works is it comes in it comes in with a we need a callback function so we put a call back here and options so here even I'll just put that on a new line so we can see the whole thing all together so we have our new intersection observer again as the callback and the options that we are going to feed it so and actually let's make this just a bit bigger so we can have that all in one line for now so obviously we don't want to just write callback and options like that but options will actually stay just as options we're gonna sort of explore the options in a minute so I'm going to leave that there for now it's not gonna be able to compile properly but I'm gonna leave it there for the moment what we usually do here with the callback is we're gonna be writing a function so you neither do this as an arrow function or as a traditional function most of them you'll see it come in as a function like this and what you're gonna be doing with the function itself is the function itself is going to call two things the function is going to call the entries and we're gonna explore what that is and we're gonna call back on the observer itself so it's here we're referencing back to itself right there and then what we'd want to do there is come in and we can create the function or whatever it is that we're going to be doing so what I'm going to do just so we can actually compile this is I'm going to create a constant options is equal to and I'm just going to leave it blank for the moment just so we don't get an error along the way and what we want to do with these entries here is entries I'm going to do a for each loop for each entry we want to do something so here I'm going to use an arrow function so for every entry we're going to do something and I'm just gonna do a console.log console.log entry so we can actually see what is happening and that's one of the reasons I have my console open here and so now we need to so this exists but it's not doing anything yet we've created it now we need to actually use it so what we're gonna do here is we're going to write observer so that's the name that we just created there so observer and where do we dot deserve because we want to tell it to observe something so I intersection observers can observe so what do we want it to observe well the only thing we have that it can right now is section one so let's go and check that out so I'll hit save on that let's shrink this back down now so you can see as soon as that is refreshed we actually got em this showing up inside of our console so we're getting our entry has just showing up so let's go and take a look at it so it's observed our section 1 and it tells us a whole bunch about it we have our bounding client rectangle so we can see the width and all the other information the bottom the top the left the right all the information about it right there we have the intersection ratio which I'll talk about a little bit later is it intersecting yes or no so is it on the page or is it not inside the viewport the route bounds the target itself so what is so here we have our entry but what is the entry well it's this section one right there and then when it happened the time on that as well so we can get a lot of information about our our target right there which is really really cool so just um a lot of them we don't need to get all of this information so one thing just to show you what we can do is entry dot target instead so let's hit save and you can see now it's only loading in the section one so I can get just the target if I need just to get the target so one thing that's really interesting with this is when I scroll and it goes off the page oh that fires again and then so and now if we look in here let's look down for a second is intersecting has change to false and before the is intersecting was true so that's cool right so it's every time it intersects or doesn't intersect with the page it fires again so now my is intersecting is once again true so every time we go on or off the page that gets fired so this is a lot better than having an event listener that's listening for scroll and is checking is checking is checking is checking is checking is checking oh now you know like finally this situation but guess what asks they keep check and keep checking and keep checking but it's only going to get fired when our element is actually observed intersecting or leaving the page so that's really really really handy so there's three options we can set we can set the route and by default or if you set this to null so if you do no it's the same thing as not actually setting an option on it so that's fine you can you can just you don't have to do it I think 99% of the time you'll probably want to just leave it because the default so if we have our route on there as null or if you don't include it at all that means it is the viewport so if we leave it like that it's just going to be the viewport and we don't really have to worry about it and we're going to be fine the there's also something called the threshold which is a zero to one scale so it's between zero and one we'll get to that in a second and the last option that we can set for it is the root margin which is a margin large and like that this works a lot like a margin would on on something if you're setting margins in your CSS and we'll explore that a little bit because it's going to sort of come in to how this this fake viewport I created is going to work now the threshold by default is zero so I'm just going to put it to zero for the moment and again the the route by default is null so it will default to the viewport and I'm going to set my root margin here to negative whoops it has to be in quotation marks 100 negative 150 pixels so think of it like a margin on my viewport so my viewport is like that so if I do negative 150 pixels it's going to pull my root margin in by 150 pixels so why is that interesting let's go take a look so it's observing that it's there the remember before it had to leave the page now watch where it's actually firing when it's getting to this line in this space here is 150 pixels so here every time it crosses this dotted line you can see it's firing off there and so that's really really handy right so now you can actually control you don't have to have something when it enters the viewport you can have it enter at you know when it's halfway through the page or whatever distance you literally want to set on there and this is just like margin when you're dealing with CSS in that you can write it in as like a zero I don't know negative 200 pixels zero or something like that except it either has to be in pixels or in percentages so if you left it as a zero it's not going to work properly it needs to have the pixel value on there so just so you're aware of that because I ran into a problem with it once though I think the error that it gives you is pretty straightforward so I'm just gonna leave this at negative 150 so I'm pulling down on this and it would work on the left and the right - if you're doing side-scrolling or there's something else going on with that where the threshold comes in is how much of this is actually on the page so if I actually put the threshold to one right now it's not actually going to work which sounds interesting but you're gonna see it's not it's not firing see how it's it's never going off and it's because especially with my negative 150 here I never have the entire thing inside of this space so if the threshold is it one 100% of the item has to be on the page whereas if it's at zero it's as soon as any little piece of it enters let's change this to like 0.25 and try that one out so now it should fire there because only 0.25 you know 25% of it is visible and then when I come back up that way it's only gonna fire so we're inside of my we've hit my margin but it's not firing it because it hasn't hit this threshold yet and then it should fire any second now there we go so now more than 25% of that section 1 is visible inside my viewport here so now it's firing so you're doing one of those things where images sort of slide in as you're going you probably want the image to be a little bit past the page you could use the root margin but you also want to make sure that it's the whole image is already on there so you might put the threshold up to 1/4 something like that but for this demo we're just going to leave that at zero for the time being and I'm gonna leave my room margin just as it is there so to actually take so let's look at how right now what we have is only working for section 1 but what if we wanted to detect if each one of my sections was getting loaded in there so what we can do is to do is sections here so document query selector all so I can get all my section so I'm not putting the dot here because I want to select all my section elements and that should be good to go now what I can't do so let's change those over to set my sections now be gonna see it's not going to work we're gonna get an error so the reason this isn't working is because the sections here is a node list and it can't run it can't have one observer on the whole list so what we can do instead of this is we want to come here and we want to do a sections for each loop on that so on the entire we're going to look at all for each section so we have sections for each so for each what for each section inside of sections we want to do something so what do we want to do well we want now our server to observe that individual section so for each one of my sections so each section inside of sections observe that section so now if we hit save and we go and check it out you can see I have all of them are getting pulled up and anytime something comes on or off the screen it's going to fire and fire and fire and fire and if we look there's the section 3 section 2 section 4 so I can keep track that each one of them is coming or leaving the page so that's really really handy and really really cool right I think that's pretty awesome so one thing I have done if we go and look at my CSS is I've created an inverse class so here I'm just setting the background color to two I get dark color and the color to white so it's gonna be the same for all of them but what we can do with this and this is just like a really really proof of concept type of thing is instead of doing our console log here so remember when the console log you know we can see we're getting all these different pieces that are part of that and the thing that's really important here is the target so let's just change that back to target now and hit go and check that out so now when we scroll we should just be seeing their section twos in the screen now section one left the screen now section three just entered the screen section two just left the screen so every time something is going on there you can see it's firing back and forth depending if something's entering or leaving the screen but console logging is all fine and dandy but we don't really want to be console like everything like that we want to be doing something with so what we can do instead of that is we can say are my entry target which is what we were to seeing that's all these all my sections that are right there as they come in they go on the class list we can toggle oops toggle a class so I'm going to toggle the class I'm going to toggle the class of inverse in this case that I created so let's save that and let's watch what happens when with that starts going off so right away you can see this one it's actually switched over now as I scroll down but you see that one and just switched and then oh when that one left the screen let's go back up you can see there oh it went and then when it leaves the screen it's switching back and then when you're gonna see the next one there's the next one bottom remember it's not technically in my viewport because I set my root margin over here so once it hits that space oh it's toggling that class off and then this one as it leaves now OOP that class gets reapplied to it because it's toggling it back on and off so as I go through those classes are sort of switching around and back and forth as we go now the weird thing with that is your intersection observer will fire right away when the page loads so it let's turn this back on here so I'm gonna hit refresh when I see the page when it loads all five of them are showing up so it's on all five of them are showing up now what it's doing is it's only showing the the target right now but if we were looking at the entry some of them would be we're seeing all those and actually I'm gonna take off the target here just for a second so we can see what I'm gonna be looking at is on all of them we have this is intersecting so is intersecting false false false the one that's true is this first one which is currently on the screen so that's why right now this one is dark but if I come and I look down at that next one it was dark too and if I come look at the next one it's dark too and it will yet you can see that's switched over it's the wrong colors so that overlays on it right now this one is dark and it's switching over when I hover on top of it so often you don't want your intersection observer to fire for everything when the things aren't currently on your page you usually do want it to fire let's say you're lazy loading images and you had an here you'd want that to fire and come in right away because it's on your screen but all those other ones you don't want images that are here to be lazy loading but oh it's it's seeing them so it's it's they're loading in anyway it defeats the purpose of your lazy loading so what we would do here is we want to use this is intersecting and make an if statement to deal with that so we could actually leave this exactly as it is but before that we could do an if entry is intersecting right away we can say we returned so what this is saying is this is the exclamation point here is saying if this is false so is our entry intersecting if it's true this we ignore this so if it's true we ignore that and we actually run this but if it is false so it's saying if this is false we return and if ever a function hits return its out it's we're done the function stops so we're checking oh it's intersect it's not intersecting okay we're done we're not going to look at all this other stuff that's going on over here it is intersecting okay now I can this isn't true so now I'm gonna run this other stuff this down here now you could do this as like a positive statement and throw this inside of here but you know if we could do it this way too so let's hit refresh on here and let's see so you can see it worked but oh look at that we only have the first one showing up in there and actually to do this let's change this over to target so we can really see exactly mix cleans that up a little bit so section one is intersecting on my page now there's two interesting things are going to happen so first you can see it's only section one that we have on there because this is the only thing that this is actually working for it's the only one that's actually intersecting right now so it's gonna hit section two so that one just switched over but what's also interesting here is section one won't D clip it won't come off because this isn't firing when our item is leaving the page it's only firing when something is actually intersecting so now we're going to get to section three there it is so we can see section three is coming up on the page it hits the page oh there we go it has come in and then we can do section four and do section five and then when I come back up the opposite is going to happen so when I get to section three here oh you can see that it just intersected and it had the inverse class on which got taken off along the way there so now when I come up this way we're gonna get to section two and when that enters the page boom and boom and we're done and it is working fabulously now there is one more thing that we can do here and where we can on observe something once it's been like once the observation has happened it's in our screen we might not want to watch it anymore so it really depends on what you're using your intersection observer for if you're doing lazy loading images works we're gonna look at in the other video you definitely want to set it up a little bit like this whereas with other stuff you probably you wouldn't want to and we're gonna we're gonna see examples of both in the coming weeks so what I'm gonna do here now is I'm gonna say that I want my observer and I want to on observe so we can tell it okay once something has happened stop watching but we have to tell it what we want it to on observe so what do I want to on observe my entry target so this target that we were just watching okay we're done finished let's stop watching that so let's take a look so you can see my section one is there you can see section two is coming in at the bottom of my screen but it's been observed let's get to section three but now if I scroll back up nothing happens that change is done and this observer is dead it's gone it's not watching these anymore it's still looking at four and five so if I start going down again now when I get to section four it's still working but it's it's not as soon as that observation has happened it's no longer observing it because of how I set this up so as I said that could be really really useful once we get into lazy loading of images and there might be a few other things along the way as well and that is how intersection observers work of course in that one it wasn't the prettiest thing but we understand the theory now so now that you know what you're doing we're gonna be learning in the next few weeks on how to do some really really cool and fun stuff with it so thank you so much for watching this video and extra special shout-out to my patrons thank you guys for supporting everything I do here at my channel I really really appreciate it and a massive shout out to Lauren Jonathan and Fernando for being my supporters of Awesome you guys are fantastic thank you very much for your generous I look forward to seeing you next week when we're going to kick this off and start doing some really fun stuff with it but until then don't forget to make your the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 171,484

Keywords: Kevin Powell, tutorial, html, css, javascript, intersection observer, intersection observer api, js, js intersection observer, js observer, web development, javascript tutorial, js tutorial

Id: T8EYosX4NOo

Length: 22min 10sec (1330 seconds)

Published: Wed Jun 12 2019