WEBVTT 1 00:00:01.480 --> 00:00:03.443 Let's implement another really cool 2 00:00:03.443 --> 00:00:08.443 and modern feature using the intersection observer API. 3 00:00:08.520 --> 00:00:09.353 And this time, 4 00:00:09.353 --> 00:00:13.180 we're gonna reveal elements as we scroll close to them. 5 00:00:13.180 --> 00:00:17.090 And this effect can give your pages a very nice touch. 6 00:00:17.090 --> 00:00:18.420 And you can, in fact, 7 00:00:18.420 --> 00:00:21.813 easily implement it without any external library. 8 00:00:23.200 --> 00:00:25.560 So the effect that I mean is this one 9 00:00:25.560 --> 00:00:27.270 here with the sections. 10 00:00:27.270 --> 00:00:28.793 So watch what happens here. 11 00:00:30.210 --> 00:00:33.750 So you see that we basically reveal each section 12 00:00:33.750 --> 00:00:34.963 as we approach it. 13 00:00:36.190 --> 00:00:39.973 Alright, so I'm not talking about these images here yet. 14 00:00:40.820 --> 00:00:43.140 So I'm just talking about the sections. 15 00:00:43.140 --> 00:00:46.103 So see how it basically slides in like this. 16 00:00:47.640 --> 00:00:50.410 Now, right, and so that's what we're gonna do now, 17 00:00:50.410 --> 00:00:52.147 with all these four sections. 18 00:00:52.147 --> 00:00:56.550 Now, the animation itself actually comes from CSS. 19 00:00:56.550 --> 00:00:57.950 And so once more, 20 00:00:57.950 --> 00:01:01.510 we will actually achieve this by simply adding a class 21 00:01:01.510 --> 00:01:04.720 to each of these sections as we approach them. 22 00:01:04.720 --> 00:01:07.580 And so we will do that using the intersection 23 00:01:07.580 --> 00:01:09.930 observer API once again, 24 00:01:09.930 --> 00:01:13.313 because that's really the perfect job for this tool. 25 00:01:14.530 --> 00:01:19.530 Okay, so let's actually take a look at our CSS here. 26 00:01:22.330 --> 00:01:23.480 So I'm gonna write 27 00:01:23.480 --> 00:01:27.940 or to search for a section hidden. 28 00:01:27.940 --> 00:01:30.460 So this is the class here. 29 00:01:30.460 --> 00:01:31.890 And so basically, 30 00:01:31.890 --> 00:01:34.743 all the sections by default have this class. 31 00:01:36.120 --> 00:01:37.793 So let me show that to you also. 32 00:01:38.930 --> 00:01:41.050 Well, actually, they don't. 33 00:01:41.050 --> 00:01:42.000 And of course, they don't, 34 00:01:42.000 --> 00:01:44.250 because then we could not see them right now. 35 00:01:45.260 --> 00:01:48.880 Okay, so we have to add them now as we build this, 36 00:01:48.880 --> 00:01:52.300 and so this will basically give them an opacity of zero, 37 00:01:52.300 --> 00:01:54.490 and it will move them a little bit down. 38 00:01:54.490 --> 00:01:57.350 And so then when we remove this here, 39 00:01:57.350 --> 00:02:00.670 it will then move them back up to a translate 40 00:02:00.670 --> 00:02:03.760 of zero rem, basically. 41 00:02:03.760 --> 00:02:07.350 Okay, so what I'm gonna do is to start 42 00:02:07.350 --> 00:02:09.100 by adding this section, 43 00:02:09.100 --> 00:02:11.230 or this class, actually, 44 00:02:11.230 --> 00:02:14.110 to all the four sections that we want to apply 45 00:02:14.110 --> 00:02:16.043 this effect to. 46 00:02:17.270 --> 00:02:21.380 So this one here, then, the next one, 47 00:02:29.330 --> 00:02:34.330 number three, and number four, yeah. 48 00:02:36.720 --> 00:02:38.653 And so now all of them will disappear. 49 00:02:39.870 --> 00:02:42.040 Okay, they are simply invisible, 50 00:02:42.040 --> 00:02:43.040 they're still there. 51 00:02:43.040 --> 00:02:45.650 So we are still like displaying them. 52 00:02:45.650 --> 00:02:49.030 And so they preserve their height, basically. 53 00:02:49.030 --> 00:02:50.990 But they are now invisible. 54 00:02:50.990 --> 00:02:54.130 And so our job is now to remove this class 55 00:02:54.130 --> 00:02:57.853 as we approach each of these sections. 56 00:03:03.050 --> 00:03:04.923 So reveal sections. 57 00:03:07.250 --> 00:03:08.783 So let's say a section, 58 00:03:10.170 --> 00:03:15.170 observer, new intersection observer, 59 00:03:16.320 --> 00:03:17.890 and then here, the callback, 60 00:03:17.890 --> 00:03:19.513 and that's already created here. 61 00:03:21.210 --> 00:03:26.210 Let's call it reveal section, like this entries. 62 00:03:32.110 --> 00:03:34.723 And this time, we will need the observer. 63 00:03:35.620 --> 00:03:37.990 And you will see in a minute why that is, 64 00:03:37.990 --> 00:03:39.370 so observer. 65 00:03:39.370 --> 00:03:40.550 And of course, 66 00:03:40.550 --> 00:03:42.970 these parameters here, as always, 67 00:03:42.970 --> 00:03:45.870 can have any name that we want, right. 68 00:03:45.870 --> 00:03:48.020 So just like in the callback functions 69 00:03:48.020 --> 00:03:49.600 of the array methods, 70 00:03:49.600 --> 00:03:51.860 where we can also give them any name. 71 00:03:51.860 --> 00:03:53.350 And here, it's the same, 72 00:03:53.350 --> 00:03:55.490 but this is kind of the standard. 73 00:03:55.490 --> 00:03:58.163 And so that's why I keep doing it like this. 74 00:03:59.200 --> 00:04:01.270 So reveal section, 75 00:04:01.270 --> 00:04:03.603 and then the object of options. 76 00:04:04.650 --> 00:04:08.770 So we want to observe all the four sections actually 77 00:04:08.770 --> 00:04:10.250 in this case. 78 00:04:10.250 --> 00:04:12.070 And it is indeed possible 79 00:04:12.070 --> 00:04:15.800 to observe them all using the same observer. 80 00:04:15.800 --> 00:04:18.040 So let's select all the sections. 81 00:04:18.040 --> 00:04:21.450 And then we will observe these as multiple targets, 82 00:04:21.450 --> 00:04:24.153 all using this observer that we just created here. 83 00:04:26.920 --> 00:04:31.920 So all sections is document dot query selector all 84 00:04:37.850 --> 00:04:40.610 and so that's simply the class section. 85 00:04:40.610 --> 00:04:42.940 And now we can loop over this node list 86 00:04:45.860 --> 00:04:46.893 with for each. 87 00:04:48.110 --> 00:04:50.530 So we use for each whenever we want to do 88 00:04:50.530 --> 00:04:54.693 something which does not involve creating a new array. 89 00:04:56.810 --> 00:04:59.230 And so here the callback function, 90 00:04:59.230 --> 00:05:02.430 I will call it section and then just like before, 91 00:05:02.430 --> 00:05:06.510 we will use our observer to observe section. 92 00:05:09.350 --> 00:05:12.730 And actually, since we're already looping over all 93 00:05:12.730 --> 00:05:17.030 these sections, it would probably be a better idea to add 94 00:05:17.030 --> 00:05:18.650 this class here. 95 00:05:18.650 --> 00:05:22.320 So this section hidden, also using JavaScript, 96 00:05:22.320 --> 00:05:26.250 so not do it manually here in the HTML, and instead, 97 00:05:26.250 --> 00:05:27.680 do it in JavaScript. 98 00:05:27.680 --> 00:05:30.120 Because some people actually disable JavaScript 99 00:05:30.120 --> 00:05:31.420 in their browser. 100 00:05:31.420 --> 00:05:33.090 And then for those users, 101 00:05:33.090 --> 00:05:35.430 the page wouldn't really be visible. 102 00:05:35.430 --> 00:05:39.620 Right, they would then have no way of removing this class. 103 00:05:39.620 --> 00:05:42.400 And so this is probably not a good idea. 104 00:05:42.400 --> 00:05:44.330 So I will copy it now. 105 00:05:44.330 --> 00:05:47.163 And then I will just undo everything we did. 106 00:05:49.970 --> 00:05:54.970 So yeah, so now it should be back to normal. 107 00:05:56.020 --> 00:05:57.130 And it is. 108 00:05:57.130 --> 00:06:00.780 And now I will do that programmatically, here. 109 00:06:00.780 --> 00:06:02.033 So that's a lot better. 110 00:06:03.235 --> 00:06:05.833 I don't know why I didn't think of that right away. 111 00:06:06.750 --> 00:06:08.910 So classlist add, 112 00:06:08.910 --> 00:06:11.940 and so this is nothing new at this point. 113 00:06:11.940 --> 00:06:13.160 Let's see. 114 00:06:13.160 --> 00:06:15.573 And now they are back to being hidden. 115 00:06:17.410 --> 00:06:22.410 So let's start by taking care of here of this options. 116 00:06:22.410 --> 00:06:26.340 And as always, the route is gonna be the viewport. 117 00:06:26.340 --> 00:06:29.830 So now, and then the threshold, 118 00:06:29.830 --> 00:06:33.280 we will set it to something greater than zero. 119 00:06:33.280 --> 00:06:34.580 And that's because we don't want 120 00:06:34.580 --> 00:06:36.030 to show the section right 121 00:06:36.030 --> 00:06:39.400 as it enters the viewport, but a little bit later. 122 00:06:39.400 --> 00:06:44.400 So let's say 15%, for example, for now, 123 00:06:44.660 --> 00:06:47.930 so this will make it so that the section is only revealed 124 00:06:47.930 --> 00:06:51.260 when it is 15% visible. 125 00:06:51.260 --> 00:06:52.540 All right. 126 00:06:52.540 --> 00:06:54.970 So this is all of the setup. 127 00:06:54.970 --> 00:06:57.660 And now let's create basically the logic. 128 00:06:57.660 --> 00:06:59.850 So in here, and once again, 129 00:06:59.850 --> 00:07:01.800 we have only one threshold. 130 00:07:01.800 --> 00:07:03.620 And so let's get that entry 131 00:07:03.620 --> 00:07:06.553 from the entries using destructuring. 132 00:07:13.630 --> 00:07:15.810 And, as always, 133 00:07:15.810 --> 00:07:17.773 let's start by logging the entry here. 134 00:07:21.780 --> 00:07:25.330 Give us some more space, this 90 is coming 135 00:07:25.330 --> 00:07:26.583 from up here. 136 00:07:28.890 --> 00:07:30.613 So we don't need that anymore. 137 00:07:32.040 --> 00:07:35.740 Now, okay, and so now we see that some section here 138 00:07:35.740 --> 00:07:39.810 is already being intersected at zero percent. 139 00:07:39.810 --> 00:07:41.940 And so now actually this target element 140 00:07:41.940 --> 00:07:43.123 will become important. 141 00:07:44.130 --> 00:07:46.360 And well, right now there is no target. 142 00:07:46.360 --> 00:07:50.100 Because this first, so to say event 143 00:07:50.100 --> 00:07:52.393 is always triggered no matter what. 144 00:07:53.360 --> 00:07:56.650 So let's go a little bit until 15% 145 00:07:56.650 --> 00:07:59.193 of the first row is intersected. 146 00:08:00.250 --> 00:08:02.410 And of course, that intersection happens, 147 00:08:02.410 --> 00:08:04.350 even though we cannot see it. 148 00:08:04.350 --> 00:08:05.740 So we don't see the row. 149 00:08:05.740 --> 00:08:08.543 But still it is now 15% intersecting, 150 00:08:11.225 --> 00:08:13.623 and now the target here is actually important. 151 00:08:15.830 --> 00:08:18.573 And so here, we actually have the classname, 152 00:08:19.750 --> 00:08:21.870 so section and section hidden, 153 00:08:21.870 --> 00:08:25.620 and so this means that actually a certain section did now 154 00:08:25.620 --> 00:08:27.093 intersect the viewport. 155 00:08:28.990 --> 00:08:30.710 Maybe we can see the ID. 156 00:08:30.710 --> 00:08:32.360 Oh, yeah, here it is. 157 00:08:32.360 --> 00:08:34.820 So it was the section one indeed. 158 00:08:34.820 --> 00:08:36.623 So the one with the ID of one. 159 00:08:39.770 --> 00:08:42.680 And this target will now actually be important, 160 00:08:42.680 --> 00:08:45.040 because now we want to make exactly 161 00:08:45.040 --> 00:08:46.540 this section visible, 162 00:08:46.540 --> 00:08:49.290 not all of the sections, right. 163 00:08:49.290 --> 00:08:51.390 But we are observing all of the sections 164 00:08:51.390 --> 00:08:56.390 here with this same observer here, right. 165 00:08:56.730 --> 00:08:58.810 And so now we need a way of knowing, 166 00:08:58.810 --> 00:09:00.660 which is the section that actually 167 00:09:00.660 --> 00:09:02.690 intersected the viewport. 168 00:09:02.690 --> 00:09:05.283 And so that's what we can use the target for. 169 00:09:06.550 --> 00:09:08.403 And so let's do that. 170 00:09:09.320 --> 00:09:12.373 So that's at entry dot target. 171 00:09:13.210 --> 00:09:14.670 And now we can, 172 00:09:14.670 --> 00:09:16.880 as always manipulate that class list 173 00:09:17.960 --> 00:09:22.960 and remove this section, 174 00:09:23.720 --> 00:09:26.193 or this class that hides it. 175 00:09:28.690 --> 00:09:31.023 And you'll see that it's already working. 176 00:09:32.400 --> 00:09:36.040 Well, it actually happens a bit too soon, it appears. 177 00:09:36.040 --> 00:09:37.743 But on this one, it was perfect. 178 00:09:38.620 --> 00:09:40.580 Let's see the next one. 179 00:09:40.580 --> 00:09:43.103 And again, it worked just fine. 180 00:09:44.057 --> 00:09:46.770 And the last one as well. 181 00:09:46.770 --> 00:09:48.810 Let's try again, this one here, 182 00:09:48.810 --> 00:09:50.510 and for some reason, 183 00:09:50.510 --> 00:09:52.360 it's already there. 184 00:09:52.360 --> 00:09:56.320 And I guess the reason for that is this first entry 185 00:09:56.320 --> 00:09:59.093 here that always gets printed in the beginning. 186 00:10:00.060 --> 00:10:02.960 So yeah, you see that the target here is actually 187 00:10:02.960 --> 00:10:04.530 this first section. 188 00:10:04.530 --> 00:10:06.580 Now it is not intersecting. 189 00:10:06.580 --> 00:10:09.890 And so let's now use that to our advantage. 190 00:10:09.890 --> 00:10:13.180 So we only want to trigger this removing here, 191 00:10:13.180 --> 00:10:14.720 when the section, 192 00:10:14.720 --> 00:10:17.403 so when the target is actually intersecting. 193 00:10:18.530 --> 00:10:22.970 So if entry.isIntersecting, then do this. 194 00:10:27.030 --> 00:10:30.410 And actually, I'm gonna use another guard clause here. 195 00:10:30.410 --> 00:10:31.970 So I will do the opposite. 196 00:10:31.970 --> 00:10:34.423 So I say, if it's not intersecting, 197 00:10:35.420 --> 00:10:37.163 then return right away. 198 00:10:38.380 --> 00:10:40.930 Okay, but if it is intersecting, 199 00:10:40.930 --> 00:10:42.830 then the function will not return, 200 00:10:42.830 --> 00:10:46.223 and simply the rest of our code is gonna be executed. 201 00:10:47.330 --> 00:10:49.136 So let's try that one more time, 202 00:10:49.136 --> 00:10:51.700 and now you see it's not yet visible, 203 00:10:51.700 --> 00:10:53.423 but it will become visible soon. 204 00:10:54.720 --> 00:10:55.763 And there it is. 205 00:10:58.410 --> 00:11:00.733 Beautiful, and it still works. 206 00:11:04.210 --> 00:11:05.043 Now, right. 207 00:11:06.170 --> 00:11:08.823 So that's a really nice effect, right? 208 00:11:09.660 --> 00:11:12.320 We can just do one more small improvement, 209 00:11:12.320 --> 00:11:15.930 which is to now unobserve these sections, 210 00:11:15.930 --> 00:11:17.933 because you see, as we keep scrolling, 211 00:11:19.000 --> 00:11:21.880 the observer keeps observing the sections. 212 00:11:21.880 --> 00:11:24.210 So you see, as we keep scrolling here, 213 00:11:24.210 --> 00:11:27.200 more and more of these events, 214 00:11:27.200 --> 00:11:28.640 keep getting added. 215 00:11:28.640 --> 00:11:31.940 But in fact, they are actually no longer necessary, 216 00:11:31.940 --> 00:11:34.200 because we already did all the work 217 00:11:34.200 --> 00:11:35.639 that we wanted. 218 00:11:35.639 --> 00:11:38.330 And so we can now unobserve. 219 00:11:38.330 --> 00:11:43.330 And so there is again by doing observer, dot unobserve, 220 00:11:44.930 --> 00:11:46.917 so the opposite of observe. 221 00:11:46.917 --> 00:11:50.090 And then again, we need to pass in which element 222 00:11:50.090 --> 00:11:51.920 should be unobserved. 223 00:11:51.920 --> 00:11:53.400 And so in this case, 224 00:11:53.400 --> 00:11:57.023 that comes from entry dot target. 225 00:11:58.610 --> 00:12:00.223 So let's see what happens now. 226 00:12:01.190 --> 00:12:05.390 So the first time, of course, we get these logs here, 227 00:12:05.390 --> 00:12:07.720 because of course, work is being done, 228 00:12:07.720 --> 00:12:10.110 but right after that, each of the section 229 00:12:10.110 --> 00:12:12.240 is being unobserved. 230 00:12:12.240 --> 00:12:13.933 So let's go to the end here. 231 00:12:14.830 --> 00:12:17.810 And when we clear this now and keep scrolling, 232 00:12:17.810 --> 00:12:20.760 you see that we get no more events here. 233 00:12:20.760 --> 00:12:23.100 And so that means that none of this section 234 00:12:23.100 --> 00:12:24.785 is being observed anymore. 235 00:12:24.785 --> 00:12:26.930 And so that's gonna be even a little bit 236 00:12:26.930 --> 00:12:28.853 better for our performance. 237 00:12:30.240 --> 00:12:32.820 Now, right, and that's actually it. 238 00:12:32.820 --> 00:12:34.260 So another really cool use 239 00:12:34.260 --> 00:12:37.053 case of the intersection observer API.