Original subtitles

Let's implement another really cool

and modern feature using the intersection observer API.

And this time,

we're gonna reveal elements as we scroll close to them.

And this effect can give your pages a very nice touch.

And you can, in fact,

easily implement it without any external library.

So the effect that I mean is this one

here with the sections.

So watch what happens here.

So you see that we basically reveal each section

as we approach it.

Alright, so I'm not talking about these images here yet.

So I'm just talking about the sections.

So see how it basically slides in like this.

Now, right, and so that's what we're gonna do now,

with all these four sections.

Now, the animation itself actually comes from CSS.

And so once more,

we will actually achieve this by simply adding a class

to each of these sections as we approach them.

And so we will do that using the intersection

observer API once again,

because that's really the perfect job for this tool.

Okay, so let's actually take a look at our CSS here.

So I'm gonna write

or to search for a section hidden.

So this is the class here.

And so basically,

all the sections by default have this class.

So let me show that to you also.

Well, actually, they don't.

And of course, they don't,

because then we could not see them right now.

Okay, so we have to add them now as we build this,

and so this will basically give them an opacity of zero,

and it will move them a little bit down.

And so then when we remove this here,

it will then move them back up to a translate

of zero rem, basically.

Okay, so what I'm gonna do is to start

by adding this section,

or this class, actually,

to all the four sections that we want to apply

this effect to.

So this one here, then, the next one,

number three, and number four, yeah.

And so now all of them will disappear.

Okay, they are simply invisible,

they're still there.

So we are still like displaying them.

And so they preserve their height, basically.

But they are now invisible.

And so our job is now to remove this class

as we approach each of these sections.

So reveal sections.

So let's say a section,

observer, new intersection observer,

and then here, the callback,

and that's already created here.

Let's call it reveal section, like this entries.

And this time, we will need the observer.

And you will see in a minute why that is,

so observer.

And of course,

these parameters here, as always,

can have any name that we want, right.

So just like in the callback functions

of the array methods,

where we can also give them any name.

And here, it's the same,

but this is kind of the standard.

And so that's why I keep doing it like this.

So reveal section,

and then the object of options.

So we want to observe all the four sections actually

in this case.

And it is indeed possible

to observe them all using the same observer.

So let's select all the sections.

And then we will observe these as multiple targets,

all using this observer that we just created here.

So all sections is document dot query selector all

and so that's simply the class section.

And now we can loop over this node list

with for each.

So we use for each whenever we want to do

something which does not involve creating a new array.

And so here the callback function,

I will call it section and then just like before,

we will use our observer to observe section.

And actually, since we're already looping over all

these sections, it would probably be a better idea to add

this class here.

So this section hidden, also using JavaScript,

so not do it manually here in the HTML, and instead,

do it in JavaScript.

Because some people actually disable JavaScript

in their browser.

And then for those users,

the page wouldn't really be visible.

Right, they would then have no way of removing this class.

And so this is probably not a good idea.

So I will copy it now.

And then I will just undo everything we did.

So yeah, so now it should be back to normal.

And it is.

And now I will do that programmatically, here.

So that's a lot better.

I don't know why I didn't think of that right away.

So classlist add,

and so this is nothing new at this point.

Let's see.

And now they are back to being hidden.

So let's start by taking care of here of this options.

And as always, the route is gonna be the viewport.

So now, and then the threshold,

we will set it to something greater than zero.

And that's because we don't want

to show the section right

as it enters the viewport, but a little bit later.

So let's say 15%, for example, for now,

so this will make it so that the section is only revealed

when it is 15% visible.

All right.

So this is all of the setup.

And now let's create basically the logic.

So in here, and once again,

we have only one threshold.

And so let's get that entry

from the entries using destructuring.

And, as always,

let's start by logging the entry here.

Give us some more space, this 90 is coming

from up here.

So we don't need that anymore.

Now, okay, and so now we see that some section here

is already being intersected at zero percent.

And so now actually this target element

will become important.

And well, right now there is no target.

Because this first, so to say event

is always triggered no matter what.

So let's go a little bit until 15%

of the first row is intersected.

And of course, that intersection happens,

even though we cannot see it.

So we don't see the row.

But still it is now 15% intersecting,

and now the target here is actually important.

And so here, we actually have the classname,

so section and section hidden,

and so this means that actually a certain section did now

intersect the viewport.

Maybe we can see the ID.

Oh, yeah, here it is.

So it was the section one indeed.

So the one with the ID of one.

And this target will now actually be important,

because now we want to make exactly

this section visible,

not all of the sections, right.

But we are observing all of the sections

here with this same observer here, right.

And so now we need a way of knowing,

which is the section that actually

intersected the viewport.

And so that's what we can use the target for.

And so let's do that.

So that's at entry dot target.

And now we can,

as always manipulate that class list

and remove this section,

or this class that hides it.

And you'll see that it's already working.

Well, it actually happens a bit too soon, it appears.

But on this one, it was perfect.

Let's see the next one.

And again, it worked just fine.

And the last one as well.

Let's try again, this one here,

and for some reason,

it's already there.

And I guess the reason for that is this first entry

here that always gets printed in the beginning.

So yeah, you see that the target here is actually

this first section.

Now it is not intersecting.

And so let's now use that to our advantage.

So we only want to trigger this removing here,

when the section,

so when the target is actually intersecting.

So if entry.isIntersecting, then do this.

And actually, I'm gonna use another guard clause here.

So I will do the opposite.

So I say, if it's not intersecting,

then return right away.

Okay, but if it is intersecting,

then the function will not return,

and simply the rest of our code is gonna be executed.

So let's try that one more time,

and now you see it's not yet visible,

but it will become visible soon.

And there it is.

Beautiful, and it still works.

Now, right.

So that's a really nice effect, right?

We can just do one more small improvement,

which is to now unobserve these sections,

because you see, as we keep scrolling,

the observer keeps observing the sections.

So you see, as we keep scrolling here,

more and more of these events,

keep getting added.

But in fact, they are actually no longer necessary,

because we already did all the work

that we wanted.

And so we can now unobserve.

And so there is again by doing observer, dot unobserve,

so the opposite of observe.

And then again, we need to pass in which element

should be unobserved.

And so in this case,

that comes from entry dot target.

So let's see what happens now.

So the first time, of course, we get these logs here,

because of course, work is being done,

but right after that, each of the section

is being unobserved.

So let's go to the end here.

And when we clear this now and keep scrolling,

you see that we get no more events here.

And so that means that none of this section

is being observed anymore.

And so that's gonna be even a little bit

better for our performance.

Now, right, and that's actually it.

So another really cool use

case of the intersection observer API.