- 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, do you know when you're
scrolling down a page and those things slowly fade in as you go? Well we're gonna be
doing that in this video and seeing how we can do it, 'cause intersection observers are pretty much perfect for that. So let's go and check it out. (beeping) 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 25000 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, in all sorts of
really, really cool things. If you're interesting in learning and you just wanna 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. It's focus is cleaner,
faster, and better code. But it's a really nice overview. It's not the longest course, which is also nice 'cause 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, that's less than 10 dollars 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 Java Script 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 seven million other people who are also in there and
getting their learn on with Skillshare. Thank you very much to Skillshare
for sponsoring this video. Now, let's get on with
what we came here for. Before we get into this, I just wanna 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 change 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, whereas in this video, I'm
just sort of making it work. So if you want more
information and understanding on how this intersection observers working all the different things,
I'm doing this set it up. I really recommend going and
checking out that first video. So if you did follow
along with the last video, it's the same deal in this one. There's a link down below
to the starting files as well as the finished files. They're both GitHub repos, 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 let's just give 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. That's these three columns right there. I have a fade-in class on those. So we'll start with those ones and then we'll look at how we can also bring in these things. 'Cause we're actually gonna do it in a, I think, in 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 kinda cool. So, we're gonna come over to my file here, and these are all my columns, So right here I'm just
gonna 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, you gotta have
the I there, 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, whoop! You can see that they just disappeared. So, perfect, we know that
everything is working. So if I come over to my observers here, I'm gonna create our new observers. So I'm just going to, let's come up to the top here. I'm gonna turn word wrap
off just for a second to make it a bit cleaner. So here we can do our const, let's call these faders,
for lack of a better word. So to be a document.querySelector. In this case, we wanna
do a querySelectorAll 'cause 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, let's turn word wrap back
on 'cause we're there. So there we go. Anything with the class of fade-in, 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 gonna call it appearOnScroll 'cause I think that name
makes a lot of sense. And appearOnScroll will be
a new IntersectionObserver. And once again, we do
need to have a function, and we also want to have our
options on there as well. So in our function, we're going to want to be
looking for our entries as well as appearOnScroll. And now we can come in and write our actual function in here. 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 shall call them, we'll call them, appearOptions. So const appearOptions will be equal to, and we'll 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 appearOnScroll here, inside of our function now, what do we wanna do in our function? Well we want to do like we did last time, and which we'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 that we can pull up our error function. And in this case, what we wanna do is, it's
really important to do this, where we're gonna say if it's false, that the entry.isIntersecting. So if you remember from the last, 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 gonna say this
is or isn't intersecting. So if it does that and
we have a function here that's toggling a class on and off, that's gonna be a problem, or just toggling a class on in this case. But that's gonna be a problem because it's gonna 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 function's 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 set our entry.target.classlist.add, and we wanna add in appear, 'cause that was the class
that we just created. And the other thing we
need to do at the same time is appearOnScroll, circling back to our actual
function here that we created or even our intersection
observer that we created here. And we're going to
unobserve(entry.target). So if 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 wanna 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. 'Cause when we were doing that, we were observing only one thing. We were observing the 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 const for. So faders. On the faders we're gonna do a forEach. So for each fader inside of faders, we want to run appearOnScroll, or we don't wanna run it, we wanna 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 into a problem here. 'Cause when I scroll down, see how they faded 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. They're fading in super, super fast. So let's use our appearOptions here. So I'm gonna use two
different options here. One of them that we're
gonna do is my threshold. Threshold. I wanna 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 hit 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 rootMargin on this as well. rootMargin. In this case, we're looking at the bottom so it'd be zero pixels, zero pixels. The bottom, let's say, 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 can probably
make this a bit smaller, maybe negative 100. Something like that. So they're fading in once
we're a 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 100 pixels from the bottom, and then they're fading in. 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
from-left and from-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 from-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 columns
on those specifically, which I'm not sure if
I'd wanna do it that way. Whatever, it's for a quick
demo, I think it works. So on anything that's on the left side, we want to also do a
transform of translateX. And 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, into 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 movement 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 gonna set up for
both of these we want it to have a transition of, for now I'm just gonna
set it to transform, so we can see it working, and then we'll add in
the opacity afterwards. So we can set up our transition like that, and when both of them,
let's just copy that, when both of them get the
class of appear on it, they are going to get a
transform of translateX of zero. So they're gonna move back
into their normal place. So with all that set up, now what we need to do is
actually observe and 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 word wrap off for a second. So I have my faders. Here I'm gonna add in another one. We'll call it sliders. So document.querySelectorAll. And in this case, we're going to be looking for anything with a class of slide-in on it. So anything with a class of slide-in, we've saved right to there. So now we can actually use this, and say sliders.forEach(slider => {appearOnScroll.observe (slider); and it should have the same effect. And it's not working. And there's a really good reason
it's not working actually. And it's because the observer
is looking for anything that's intersecting with the page, but I said appear 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 go scroll all the way back up, and it should actually fix that. So these will all 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, we're gonna wanna do two more things. One, I'm gonna make this
so it's actually back up, maybe to 250 pixels, just cause 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 one, 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 one. 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. They're also gonna start
with an opacity of zero. And the opacity will become one. Opacity of one. 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 the two 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, don't overdo it please, if you do this. Especially, we learn new effects and they're like, whoa, that's cool, and then everything on
the page is just flying, no, please. Using it for 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 might've prefer reduced
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. (chuckling) It's a cool thing but don't overdo it. But yeah, 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 liked that. If you did like the video, please let me know in the comments below. A big thank you to my patreons
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 Jonathon for being super, super generous with their support over on Patreon. If you enjoyed this video, I'm gonna encourage you to
hit the subscribe button. But if you're already subscribed, or even if you're not subscribed. Also if you go into 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 wanna know everything I'm up to and you never wanna miss anything, you can subscribe to my
newsletter below and get that, or actually it should be
showing up on the side card any second now as well. Click that, it should let you sign up. And you'll know that you're
getting everything I do. So if you like my stuff, it's a good way to 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 (chuckles) to think about that one. So we're gonna be
continuing that exploration in next week's video, where 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 cause if you're on your phone and you don't wanna be getting
dinged with all the data that you don't need to be using. But it also boosts the
performance of your sight which Google likes, and just is a good idea
to do in general too. So if you really wanted to use one, you don't want these
fancy effects going on, 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
corner of the internet just a little bit more awesome.
