Original subtitles

1 1

Let's implement another really cool 2

2

and modern feature using the intersection observer API. 3

3

And this time, 4

4

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

5

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

6

And you can, in fact, 7

7

easily implement it without any external library. 8

8

So the effect that I mean is this one 9

9

here with the sections. 10

10

So watch what happens here. 11

11

So you see that we basically reveal each section 12

12

as we approach it. 13

13

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

14

So I'm just talking about the sections. 15

15

So see how it basically slides in like this. 16

16

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

17

with all these four sections. 18

18

Now, the animation itself actually comes from CSS. 19

19

And so once more, 20

20

we will actually achieve this by simply adding a class 21

21

to each of these sections as we approach them. 22

22

And so we will do that using the intersection 23

23

observer API once again, 24

24

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

25

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

26

So I'm gonna write 27

27

or to search for a section hidden. 28

28

So this is the class here. 29

29

And so basically, 30

30

all the sections by default have this class. 31

31

So let me show that to you also. 32

32

Well, actually, they don't. 33

33

And of course, they don't, 34

34

because then we could not see them right now. 35

35

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

36

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

37

and it will move them a little bit down. 38

38

And so then when we remove this here, 39

39

it will then move them back up to a translate 40

40

of zero rem, basically. 41

41

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

42

by adding this section, 43

43

or this class, actually, 44

44

to all the four sections that we want to apply 45

45

this effect to. 46

46

So this one here, then, the next one, 47

47

number three, and number four, yeah. 48

48

And so now all of them will disappear. 49

49

Okay, they are simply invisible, 50

50

they're still there. 51

51

So we are still like displaying them. 52

52

And so they preserve their height, basically. 53

53

But they are now invisible. 54

54

And so our job is now to remove this class 55

55

as we approach each of these sections. 56

56

So reveal sections. 57

57

So let's say a section, 58

58

observer, new intersection observer, 59

59

and then here, the callback, 60

60

and that's already created here. 61

61

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

62

And this time, we will need the observer. 63

63

And you will see in a minute why that is, 64

64

so observer. 65

65

And of course, 66

66

these parameters here, as always, 67

67

can have any name that we want, right. 68

68

So just like in the callback functions 69

69

of the array methods, 70

70

where we can also give them any name. 71

71

And here, it's the same, 72

72

but this is kind of the standard. 73

73

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

74

So reveal section, 75

75

and then the object of options. 76

76

So we want to observe all the four sections actually 77

77

in this case. 78

78

And it is indeed possible 79

79

to observe them all using the same observer. 80

80

So let's select all the sections. 81

81

And then we will observe these as multiple targets, 82

82

all using this observer that we just created here. 83

83

So all sections is document dot query selector all 84

84

and so that's simply the class section. 85

85

And now we can loop over this node list 86

86

with for each. 87

87

So we use for each whenever we want to do 88

88

something which does not involve creating a new array. 89

89

And so here the callback function, 90

90

I will call it section and then just like before, 91

91

we will use our observer to observe section. 92

92

And actually, since we're already looping over all 93

93

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

94

this class here. 95

95

So this section hidden, also using JavaScript, 96

96

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

97

do it in JavaScript. 98

98

Because some people actually disable JavaScript 99

99

in their browser. 100

100

And then for those users, 101

101

the page wouldn't really be visible. 102

102

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

103

And so this is probably not a good idea. 104

104

So I will copy it now. 105

105

And then I will just undo everything we did. 106

106

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

107

And it is. 108

108

And now I will do that programmatically, here. 109

109

So that's a lot better. 110

110

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

111

So classlist add, 112

112

and so this is nothing new at this point. 113

113

Let's see. 114

114

And now they are back to being hidden. 115

115

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

116

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

117

So now, and then the threshold, 118

118

we will set it to something greater than zero. 119

119

And that's because we don't want 120

120

to show the section right 121

121

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

122

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

123

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

124

when it is 15% visible. 125

125

All right. 126

126

So this is all of the setup. 127

127

And now let's create basically the logic. 128

128

So in here, and once again, 129

129

we have only one threshold. 130

130

And so let's get that entry 131

131

from the entries using destructuring. 132

132

And, as always, 133

133

let's start by logging the entry here. 134

134

Give us some more space, this 90 is coming 135

135

from up here. 136

136

So we don't need that anymore. 137

137

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

138

is already being intersected at zero percent. 139

139

And so now actually this target element 140

140

will become important. 141

141

And well, right now there is no target. 142

142

Because this first, so to say event 143

143

is always triggered no matter what. 144

144

So let's go a little bit until 15% 145

145

of the first row is intersected. 146

146

And of course, that intersection happens, 147

147

even though we cannot see it. 148

148

So we don't see the row. 149

149

But still it is now 15% intersecting, 150

150

and now the target here is actually important. 151

151

And so here, we actually have the classname, 152

152

so section and section hidden, 153

153

and so this means that actually a certain section did now 154

154

intersect the viewport. 155

155

Maybe we can see the ID. 156

156

Oh, yeah, here it is. 157

157

So it was the section one indeed. 158

158

So the one with the ID of one. 159

159

And this target will now actually be important, 160

160

because now we want to make exactly 161

161

this section visible, 162

162

not all of the sections, right. 163

163

But we are observing all of the sections 164

164

here with this same observer here, right. 165

165

And so now we need a way of knowing, 166

166

which is the section that actually 167

167

intersected the viewport. 168

168

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

169

And so let's do that. 170

170

So that's at entry dot target. 171

171

And now we can, 172

172

as always manipulate that class list 173

173

and remove this section, 174

174

or this class that hides it. 175

175

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

176

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

177

But on this one, it was perfect. 178

178

Let's see the next one. 179

179

And again, it worked just fine. 180

180

And the last one as well. 181

181

Let's try again, this one here, 182

182

and for some reason, 183

183

it's already there. 184

184

And I guess the reason for that is this first entry 185

185

here that always gets printed in the beginning. 186

186

So yeah, you see that the target here is actually 187

187

this first section. 188

188

Now it is not intersecting. 189

189

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

190

So we only want to trigger this removing here, 191

191

when the section, 192

192

so when the target is actually intersecting. 193

193

So if entry.isIntersecting, then do this. 194

194

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

195

So I will do the opposite. 196

196

So I say, if it's not intersecting, 197

197

then return right away. 198

198

Okay, but if it is intersecting, 199

199

then the function will not return, 200

200

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

201

So let's try that one more time, 202

202

and now you see it's not yet visible, 203

203

but it will become visible soon. 204

204

And there it is. 205

205

Beautiful, and it still works. 206

206

Now, right. 207

207

So that's a really nice effect, right? 208

208

We can just do one more small improvement, 209

209

which is to now unobserve these sections, 210

210

because you see, as we keep scrolling, 211

211

the observer keeps observing the sections. 212

212

So you see, as we keep scrolling here, 213

213

more and more of these events, 214

214

keep getting added. 215

215

But in fact, they are actually no longer necessary, 216

216

because we already did all the work 217

217

that we wanted. 218

218

And so we can now unobserve. 219

219

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

220

so the opposite of observe. 221

221

And then again, we need to pass in which element 222

222

should be unobserved. 223

223

And so in this case, 224

224

that comes from entry dot target. 225

225

So let's see what happens now. 226

226

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

227

because of course, work is being done, 228

228

but right after that, each of the section 229

229

is being unobserved. 230

230

So let's go to the end here. 231

231

And when we clear this now and keep scrolling, 232

232

you see that we get no more events here. 233

233

And so that means that none of this section 234

234

is being observed anymore. 235

235

And so that's gonna be even a little bit 236

236

better for our performance. 237

237

Now, right, and that's actually it. 238

238

So another really cool use 239

239

case of the intersection observer API.