IntersectionObserver?! Scroll Activated Animations & More with No Dependencies

Key Takeaways

no libraries no third-party scripts just the almighty intersection observer before we begin this video sponsored by lenôtre now uh note supplies servers that let you deploy apps sites and services that are both flexible and scalable the nodes one-click apps make it easy to setup a web stack or WordPress instance in under a minute simple pricing starting at five dollars per month ensures there's no hidden fees or surprise bills so sign up with the link below and use this code right here to receive a free $20 credit on your lonoa count everyone what's up Gary Simon of course satchel com so today we're gonna be covering something called the intersection observer and this is because I last week or two weeks ago I did a video on something called bounds Jas and somebody mentioned why don't you just teach the intersection observer and people could do it themselves without having to rely on a third-party script so that's exactly what we're gonna do today we're gonna check out the intersection observer and how we can use it to do things like adding styles or classes based on when you're certain dom elements come into view and all of this stuff is quite customizable so we'll be going over it and yeah make sure to subscribe if you haven't yet and let's get started alright so we're gonna get started here in our code editor I have an empty folder open I called observe so create your folder open up visual studio code in it we're going to create an index.html as always Emmit abbreviation with the exclamation point to get some click boilerplate there we're gonna link our CSS folder main CSS file that doesn't yet exist so let's go ahead and create that CSS folder and our main we're gonna use sass here so in order for this to work you're gonna have to have the live sass compiler in order to click that watch sass button down there and we will also control B right click open with live server and in order to launch that as well you will need these two eye plugins right here live sass compiler and live server so install those and just restart your Visual Studio code and you can rock just like me alright so let's get started here I'm I did set up a a Visual Studio code kind of like mock up for this I did it beforehand but um we're not gonna show that part because this isn't necessarily a decent IUI design tutorial so we're just gonna get started with the HTML first all right so let me close this - so what we'll do is put in we're gonna have just an empty section right here it's gonna be a hundred percent or 100 viewport Heights for us to simulate you know the scroll down and then we'll put the next one in and this one will give a class actually will do class equals I'm just going to call this content and we're gonna have two columns so we're gonna have a column left plus a column right or inside the left column we'll go ahead and have our images so image source is gonna be images four slash yellow jpg' alt can be yellow and we're gonna give it a class as well I we're just gonna call this yellow and also will leave this offer so I was going to add another animation class but we'll do that in a bit here we can also put in let's copy that could shift alt in the down arrow we're going to put in squiggly squiggly dot SVG this time and alt squig I guess we'll call and class here is going to be squig as well yeah and that looks pretty good and then also between these we're gonna put a paragraph with the following type here oops there we go all right and then this is also going to have a class up not yet we'll do that after all right so which get these images in here I'm going to make this available on a code pen so check the YouTube description if you want access to the files or whatever you can use whatever you want of course alright and here's the images folder all this is just this SVG file here and yellow dot jpg alright so this is this I came from I believe the photos splash plug in Adobe XD okay so let's continue on here so I what we're gonna do is just get it styled up initially with our SAS alright so I'm gonna be pasting a lot of these in and I'll describe what's happening as we go along so first of all setting the height to 100 100 viewport Heights margin zero just to set that to zero and then nothing else too exciting our section we have a width of 80% I'm not making this responsive it's you know unnecessary we don't want this to be too long we're going to Center it up and then give it as well a height as I 100 viewport height so that way we don't see anything initially when we look at it on here so as you can see we scroll down then we see this stuff here all right so after that we'll have I our content and our content as you can see we have a section class of content so we'll have content here and we'll put in display grid and then grid template hmm sorry columns is going to be 70% for that first column and then auto or you know the remaining percentage for the right column all right then we have a left inside the left we're gonna have position:relative text-align:center display grid and then place items Center that will place the I the child elements in here I vertically centered and horizontally centered as well and so if we look at this we just have these three right here alright inside or outside of that we're going to put in yellow that's our image by the way so we're gonna make it fifty percent and for now we're gonna leave this off but we're gonna uncommon this in a second so let's check out what we have so far yeah nothing too exciting after that we're gonna have our paragraph in fact we could just do this right here nested in there background white and this is a styling thing decently so I'm also going to make position:absolute so it can sit on top of the image margin top is going to be around negative 25% how do I know this because I experimented initially when I create and created it right we're gonna have 17% z-index it's going to be able to set that at I don't think we even have to set that I don't know why I did that initially color black padding is gonna be 1 a.m. let's see border radius is gonna be 15 pixels width we're gonna be 20 viewport width and then text-align:left so let's check this out okay I have no clue what I'm doing here lol that's what that did all right and then next up we're gonna have our squid which is position:absolute it's just a squiggly graphic design element really it wasn't necessary but I wanted to put it there left is going to be 19% and width will be we'll just do it eight a viewport width all right there we go okay so next up we'll have our right that's going to be display grid place item Center as well I don't know what this is a request is failed get out of there and then also we'll have our h2 element which is color white and font size is gonna be 1.7 ram we're just styling up the right column right now which we cannot see hopefully I didn't screw something up and our paragraph will be looks like I did screw something up should be showing up I know 1.6 éem all right so let's figure out what's happening there oh because they didn't put anything in it sorry about that h2 is get yellow and then also I we have some lorem ipsum text I I have a specific amount and I don't know what that number is so I'm just gonna paste this off-screen there so now let's check this out ooh that is completely incorrect let's get that I better situated here I think I missed a couple properties I know what I did I missed an HTML element I yeah let's go ahead go back here we missed a class we're just gonna have a div all right and we're gonna make it empty but we're gonna add a class later but just watch this single class is gonna fix everything that you just saw so if we save it there we go so this is what we're working with this is the final lay layout of what it's going to basically animate to all right so let's get to that part which is the meeting bones of this tutorial sorry there's setup work I like to show the process just so nothing is missed at all you kind of understand the full context of the situation so now let's go do the a the JavaScript all right so let's create a script section down here just ascription script okay alright so first what we want to do is we want to select one of our elements that we want to display and I'm going to do this with just one element at first just to show you kind of like a beginner level understanding and then we're gonna make it apply on any number of these elements that we wanted to by placing a class on to it for now we're just gonna have one class that we add on to yellow right here which is annum this K this am class for short for animation is not defined in our Sasson or anything like that it's just for us to be able to get use a selector that we can apply to multiple elements but for now we're just doing one alright so we're gonna call this const images we're calling it images even though it's singular I'm gonna get one document query selector we want all no just query selector for now and we're gonna use all in a second or at a few minutes rather alright so we're gonna get that Anam class right here after that we have to create an instance of the intersection observer so that's what I was talking about at the intro of the video and this is what allows you in like a native way or in terms of without using any libraries javascript libraries this is how you do it I by default so we're gonna I call it an observer new intersection right there and we're gonna I pass in entries and open this up in a function so inside of here we're going to it's just console log entries all right and then we this is the first step is to create this intersection observer but this does nothing you have to call an observe method on the observer so observer dot observe and what do we want to observe well this we want to observe one of these HTML elements alright so we'll say here images all right so this intersections observer by the way I I want to show you real quickly this is the main API for here I'll try to remember to link this but you can just type an interception intersection observer in Google and you'll find this like it's like the first result it does take a few options as shown right here I accept route route margin and threshold so you can pass in these options after the callback that we just specified and you can read up on what these do it tells you you know the route is the element that it is used as a viewport for checking visibility of the target by default if you you leave this out it defaults to the browser viewport if it's not specified ok the route margin and threshold you guys can experiment with that as well but basically it will allow you to control when this thing fires the intersection of observer by default it's right when the element starts to come into view alright so I let's make sure we save this we'll go back to our browser and ctrl shift I let's go to elements no console rather but fail to execute observe on an intersection oh yes and I am an idiot we need to move this into the class element oops there we go sorry about that now it should work okay so now right away we can see we saw it but let's refresh this I in the console here let's refresh and we could see if we expand this that we open up the first index here of zero we could see it says is intersecting is false and is visible is false as well so again we're going to get it no matter what it's gonna fire no matter what but once we scroll down and it comes into view and again it's just the image that we're looking for at this point in time we'll see is intersecting is now true all right so what we can do with that now is we can look for that specific property of is intersecting so let's get rid of let's count but sigh well we'll leave this open for now so in here what we can do is say if I let's see here entries dot intersection ratio is 0 greater than 0 rather then we can do something here so what we could today is entry target start targets dot style dot animation alright so this if you were to look into entries and if you're looking to console.log rather you would find target and then style and then we're just going to change the animation property here I so what we can say is what do you back to appear will say annum one that's going to be the animation name that we're gonna set up in keyframes we'll say for two seconds I for a delay actually we'll just leave that blank right there not the delay I rather but the runtime will just say two seconds I and then we'll say for words and ease out alright and then we'll say else entry entries rather target style animation equals none so what this basically means is and the reason I put this in back tics is because in a second we're gonna add in an actual variable and you'll see why but what's happening here is once it's in view then we'll add this style the CSS style to that property otherwise if it's not or if the person Scrolls back up we'll remove it a common thing you could do also is to apply a class to the class list but I'm choosing just to adjust a style in this case alright so let's go ahead and save this and nothing's going to happen because we haven't defined this annum one in fact let's go ahead and do that right off the bat so we can actually see something work and it's very simple all I'm going to do is paste this in at the bottom so we have our keyframes annum one eye from transform translate Y by a negative of 100 pixels so we're going from this and opacity 0 and then to transform the original point which is 0 and then opacity 1 definitely check out my previous video I did last week where I want to over CSS optimize a anime animation optimizations you really only want to stick to for the most part these two right here because it's less intensive for the devices and such that have to display them so save that and let's go ahead here and refresh all right what's happening cannot read property style of undefined way this is not working out very well oh I know why we forgot to specify an array index all right so I'm just going to paste that in we're gonna remove this in a second because we're gonna do it for multiple but let's just die add that in here real quick so this thing can work alright so you just saw it but let's refresh scroll down and there it goes come back up it removed it and then it'll just keep on doing that all right very cool so now let's make this work because obviously we won't we want to animate multiple elements here right so let's go ahead and make this work so the first thing that's do is query selector all that will select you know any number other multiple elements that have the animation class on it so let's add that to everything we want to add class equals annum and also an I'm here as well and you know what I think we're gonna add it to our other wares of that yes I this div right here is gonna have a class of animus well just to take these two elements and animate them in so we can say that but it's not going to yet work so we have our entries and this time we have to wrap everything inside of a for each so we take our entries we say for each we're gonna pass entries or entry rather into here so let's get rid of that close this my family's being loud downstairs very frustrating all right then let's just rename this we got entries what we'll say is or if entry rather intersection is zero I will say entry because we don't have to pass any index anymore entry is the one that's currently selected alright right there and then we'll say entry here and that should be good and then we have to watch all of the elements this won't work right here so we have to do eye images for each take our image and wrap this up and then we just say image here so now we're going to be watching all those anything that has the animation class on it so let's save this and see what happens notice how they'll all come in with the same animation it's not exactly it doesn't really make sense because you would just have like the whole section animating instead of taking all four of these but if you wanted to animate differently somehow like stagger in I'm going to show you how to do that alright so what we'll do is we're going to use data attributes custom data attributes here we're gonna say data - and that's the convention you always have to specify data - for your custom attributes and we'll call this delay so this delay is going to be 0s for 0 seconds that means we want this one to start immediately once that intersection observer fires let's copy this well paste this in here we'll say this one will be like 0.5 seconds so half a second and then over here we'll say this one is around yeah 0.7 all right so they're coming pretty quickly but not exactly it the same it'll make the animation look a little bit more interesting down here we'll say this one will be one second alright so in order to do this we have to specify in an animation shorthand property the actual delay and we can get that right here so we can put in our dollar sign squiggly entry target dot data set dot delay alright so data set contains all of your custom attributes you don't include data here - it's just this name right here and that's how you get this 0s value and 0.7 s value and all that stuff so we're just basically creating a variable that just goes right in here for the duration okay hopefully that makes understand that makes sense that should be yet though let's go ahead and check it out ooh that didn't look correct yeah there's something wrong oh and I know why it's because I remember when we were doing the CSS we were talking about bringing certain things and hiding them sure if I failed Ilya and also opacity zero that's what we want to add right here so they all have they're all going to have a passage a zero by default and now they come in like we want them to so scroll down and there we go all right so hopefully you enjoyed that if you did and learn something make sure to subscribe and click the bell notification icon as well all right I'll see you guys will soon good bye [Music] [Music]