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.