Fade and scroll items into view while scrolling

Key Takeaways

hi there my name is Kevin and welcome to this video where we're continuing our exploration of intersection observers if you missed the beginning of the series I encourage you to go and check it out but what we're doing in this one is don't you're scrolling down a page and those things like slowly fade in as you go well let that we're going to be doing that in this video and seeing how we can do it because intersection observers are pretty much perfect for that so let's go and check it out Before we jump into the content of this video I just want to say a big thank you to Skillshare for sponsoring this video if you don't know about Skillshare it is a massive online learning community with over 25,000 classes by getting a membership with them you get access to the entire library unlimited access to everything which is really really cool they have classes in web development in UI in UX in Photoshop and all sorts a really really cool thing so it's really if you're interested in learning and you just want to absorb tons and tons of information I'm guessing you do if you're here it's an awesome really cool platform as an added bonus too if you use the link down below the first 500 people who use it will get access to Skillshare for two months for free and one of the classes I think you might like since you're watching this video is the JavaScript toolkit its focus is cleaner faster and better code it's a really nice overview it's not the longest course which is also nice is you get to plow through it pretty quickly so as I mentioned if you use the link down below you get two months for free if you do sign up for an annual membership after that it's less than $10 a month and that gives you access to their entire library unlimited which is really really cool and awesome it's a platform I've used I've keep watching stuff on there like that javascript class and others so I really do think that you will like it and I really encourage you to check it out and when you do you'll be joining up with more than 7 million other people who are also in there and get in there learn on with Skillshare thank you very much to skill Sarah for sponsoring this video now let's get on with what we came here for before we get into this I just want to say that I'm continuing working on a file that I started last week where I did the navigation so when I get into the JavaScript if you didn't see that video you're gonna see some JavaScript that's already in there but I'm not actually touching it but just if you're like why is there all this code there already that is from the last video where we changed the navigation on scroll you can check that video out if you do want to and if you didn't see my original video on the introduction to intersection observer that one I really go into detail on how these are working ORS in this video I'm just sort of making it work so if you want more information and understanding on how this intersection observer is working on all the different mooing to set it up I'd really recommend going and checking out that first video so if you did follow along with the last video it's the same dealings when there's a link down below to the starting files as well as the finished files they're both github repo so you can either follow along with what I'm doing here and the finished ones if you ever get stuck or anything like that you can go in there and take a look so it's just a quick look at the markup to see how I've set this up a little bit so you can see I have three columns here so that's that's these three columns right there I have a call a fade in on class on those so we'll start with those ones and then we'll look at how we can also bring in the these things because we're actually going to do it and I think a clever way to make it all work with a single class so we can actually use the same observer for all of them which is kind of cool so we're gonna come over to my file here and these are all my columns so right here I'm just going to add in a fade in and we're gonna start with these having an opacity of zero on them and we'll add a transition to the opacity opacity of we'll say 250 milliseconds transition yeah I have the either transition and we'll have it ease in and then what we're gonna use is a class called appear so if we have a fade in with also a class of appear on it it's going to get an opacity of one so if I save that well you can see that they just disappeared so perfect we know that everything is working so if I come over to my observers here we're going to create our new observer so I'm just going to let's come up to the top here I'm gonna turn wordwrap off just for a second to make it a bit cleaner so here we can do our Const let's call these faders for a lack of a better word so to be a document query selector in this case we want to do with query selector all because we're gonna have multiple it's not just one item and that's anything that has the class of fade in so anything with the class of fade in its turn word wrap back on because we're there so there we go and anything with the class of fade in will get the we'll be calling it a fader so let's save that so let's come down and write our observer for that so for this observer I'm going to it appear on scroll is I think that name makes a lot of sense and if you're on scroll will be a new intersection observer and once again we do need to have a function and we also want to have our options on there as well so on in our function we're going to want to be looking for our entries as well as appear on scroll and then we can come in and write our actual function in here so I'm so that's working but you're seeing we're getting an error here for options not being defined so let's come and set those options up right away Const and I should call them we'll call them appear options so it Const appear options will be equal to and will do nothing for now but once again we'll come back and add some stuff into that a little bit later on so inside of our appear on scroll here inside of our function now what do we want to do in our function well we want to do like we did last time and which you'll be doing all the time with these is our entries for each and set it up for each individual entry and then another function so then we can pull up our arrow function and in this case what we want to do is it's really important to do this where we're gonna say if it's false that the entry is intersecting so if you remember from the last of the very first video I looked at when we explored these intersection observer whether or not it's intersecting is gonna fire as soon as the page loads and it's going to say this is or isn't intersecting if it's not intersect so if if it does that and we have a function here that's toggling a class on and off that's going to be a problem or just toggling in class on in this case but that's gonna be a problem because it's going to turn the class on everywhere and we're not gonna see what it's actually doing so the first thing we have to do is say if it isn't intersecting with the page we want to return let's get the heck out of here so return this functions done don't look at anything else but if it is intersecting with the page now we can actually do something so in this case we can say our entry target class list add and we want to add in up here is that was the class that we just created and the other thing we're going to do at the same time is appear on scroll so we're going back to our actual function here that we create our event our intersection observer that we created here and we're going to on observe entry target so you're not sure why I'm doing that you can check out the first video that I did as well but pretty much it's just to say stop looking at something once you've done your job so everything is in place but now we actually want to get it to work so to do that we need to come down and we can't do it like we did when we did our navigation here because when we were doing that we were observing only one thing we were observing this section one part of our page here and paying attention to where that was but in this case we're gonna be looking at all three of these columns plus eventually we're gonna use the same thing to look at these as well so if we're doing that what we need to do is first do our faders which we already set up our cost for so faders went and on the faders we're going to do a for each so for each fader inside of faders we want to run up here on scroll or we don't want to run it we want to set up it to observe that individual fader so now if I hit save look at that they all came in so let's scroll back up to the top of the page hit refresh now actually we might run into a bit we will run it into a problem here because when I scroll down see how they fade it in right away let's do that one more time I'll scroll up pay attention to the bottom of the page as soon as they get there they're already there like they're fading in super super fast so let's use our appear options here so I'm gonna use two different options here one of them that we're gonna do is my threshold threshold I want to make sure the entire image or the entire column is in the page whatever I'm fading in I want the whole thing to be there before it starts to fade in so let's leave that there not a semicolon let's just sit save like that whoops scroll up and refresh so now when I get to here you can see they haven't faded in yet they haven't faded in and now there we go then they fade in so only once the entire thing is visible will they fade in so that's good but I think we also could use a root margin on this as route margin in this case we're looking at the bottom so to be zero pixels zero pixels the bottom let's say like 200 pixels negative 200 and zero pixels so let's scroll back up and I'll save my javascript file here and now when we scroll down not only do we need the whole thing to be in the screen but it needs to be pretty far into the screen I think I overdid it there but now they're fading in so I think I'd probably make this a bit smaller maybe negative 100 something like that so they're fading in once were 100 pixels in and I think that'll work a little bit better let's just try out one more time the whole thing is there they have a hundred pixels from the bottom and then they're fading it perfect so that is working really really nicely now let's set that up to also work to get these things here to slide in so the first thing I'm gonna have to do is come back to my CSS and come down here so I already have my friend left and friend right so this is anything on the Left I have a class of from left on any of the ones on the right I have a firm right on I was a little bit lazy I set up the grid columns I set them up on a grid and use the grid coffins on those specifically which I'm not sure if I'd want to do it that way but whatever it's for a quick demo I think it works so on anything that's on the left side we wanted to also do a transform of trans translate X now let's move it 50% of the way that way and I'm gonna take the same thing but if it's on the right side and do a positive 50% let's save that and you can see they've moved out now it's causing some side scrolling we'll fix that in a bit but it's move them out to the sides like that and then for either one of these so for my from whoops spell things right from scroll down a little from left let's say my from left and actually my from right from right we're going to set up for both of these we want it to have a transition of four now I'm just going to set up the transform so we can see it working and then we'll add in the opacity after words so we can set up our transition like that and when both of them let's just copy that when both of them get to class of appear on it they are going to get a transform of translate translate X of 0 so they're going to move back into their normal place so with all that set up now what we need to do is actually observe and make make it work now just really fast what I did is if we come and look at them I've done two things on it I've given them from right and from left which is positioning them but I've given them all the class of slide in just because that way we can set up one observer for all of them in one shot so let's turn wordwrap off for a second so I have my faders here I'm gonna add in another one we'll call it sliders so document dot query selector all and in this case we're going to be looking for anything with a class of slide in on it so anything with the class of slide in we've saved right to there so now we can actually use this and say sliders for each slider appear on scroll observe slider and it should have the same effect and it's not working and there's a really good reason that's not working actually and it's because the observer is looking for anything that's intersecting with the page but I said up here that the whole thing has to be in the view and that's actually causing a problem because right now they're not all the way in the view the whole thing is actually sticking out the sides so either we could play with our left and right margins on this and make them positive to be a lot bigger which is an option or I could put the threshold down to zero so if I put the threshold down to zero you can see now it's actually starting to work and as I go down those items are starting to slide into view there is also the problem of the side scrolling which probably in this case if you really wanted to set it up this way I think the easiest way to fix it would just be to come on to the body here and say the overflow X is it X yeah is hidden so if we do that and let's just go all the way back up and it should actually fix that so these will come in like that and then you can see they're sliding in from the left and the right like that and we don't have any side scrolling which is handy so I think what I do is leave it that way but what we're gonna wanted to do two more things one I'm gonna make this so it's actually back up maybe to 250 pixels I'm just cuz the threshold is so low so actually let's come back up to here and refresh and so there we go so I think that'll work a little bit better the other advantage with this is if your threshold is 1 and you have something really long that you're fading in for some reason I probably wouldn't do it but if that does happen it will never come in if it's longer than the viewport it just can't hit a threshold of 1 so this might be a safer option as well and these types of mistakes that I think everybody can run into so it's working but obviously it looks weird that they're sticking out the side and coming in so I think the other thing that's important that we do is on our from left and from right we're also going to start with an opacity of 0 and the opacity will become 1 opacity of 1 but that means we also need to transition that so here let's say the opacity is let's make it a little faster 250 milliseconds ease in and so we can have and we can have the the 2 on there and actually just to make it so we're doing a transition on both the opacity and on our transform property there so if we go and look at it now let's refresh my page when we scroll down that is coming into view then we get to here it sort of fades in and slides into view at the same time so it just grabs the attention a little bit that was fine that was cool just 1 don't overdo it please if you do this if especially we learn new effects and they're right well that's cool and then everything on the page is just flying it no please like using it for like a little bit something to grab attention a little bit extra here or there that's fine that's cool but if you start really doing it be really careful and also just be note that people don't always like lots of animation people may have prefer reduce animation things like that so just do please try and take them into account that you don't have all these things flying around because even a normal person won't like that and they'll get the hell out so and you know it's a cool thing but don't overdo it I think it was not only is it a cool thing it is a good way to learn how intersection observers work so I hope you like that if you did like the video please let me know in the comments below a big thank you to my patrons for helping support me and everything I do here on my channel thank you guys so much and of course an extra big thank you to my supporters of awesome Lauren Fernando and Jonathan for being super super generous with their support over on patreon if you enjoyed this video I'm going to encourage you to hit the subscribe button but if you're already subscribed or even if you're not subscribed also if you go to in the description I do have a newsletter so that's another way you can know that you're not missing anything including articles I write I do occasionally write some articles over on my website and very very rarely but occasionally on other websites as well so if you want to know everything I'm up to and you never want to miss anything you can subscribe to my newsletter below and get get that or actually it should be showing up on the side card any second now as well like that it should let you sign up and you'll know that you're getting everything I do so if you if you like my stuff it's a good way to you keep up with everything I'm doing thank you very much for watching and we're gonna be continuing our intersection observer exploration that took a lot of concentration to say think about that one we're gonna be continuing that exploration in next week's video we're gonna be looking at lazy loading images which is probably the best thing to be using it for honestly it has a massive benefit to the user just because if you're on your phone you're don't want to be getting dinged with all the data that you don't need to be using but it also boosts the performance of your site which Google likes and just is a good idea to do in general too so this is probably like so if you really wanted to use one you weren't you know you don't want these fancy effects going on like this is a really good reason we're gonna be looking at that in next week's video so I'm really looking forward to that but until then don't forget to make your Court of the internet just a little bit more awesome