00:00:02 Now, let's head over into our first video section.

00:00:06 What do I mean by that?

00:00:07 Well, check out how it looks like on the finished website.

00:00:10 If I scroll past this, we have this section with some text, which is not super exciting, but then the one below it is where the video starts playing.

00:00:19 This one I really liked, so as you scroll, the video actually plays and introduces the character.

00:00:26 Let's make it happen.

00:00:27 I'll put our current site side by side so we can see what we're doing, and then create a new section within the sections folder,

00:00:34 which I will call a firstvideo.jsx.

00:00:39 I'll run RAFCE, remove the React import, and then import it within the app.jsx right beneath the hero.

00:00:49 That's going to be first video.

00:00:53 Perfect.

00:00:54 Now we can head over into it and start implementing it.

00:00:58 This section will be pinned and animated using G-SAP, and it'll play the video while fading it in after the hero section scrolls out.

00:01:07 We can first start by building out the layout without animation.

00:01:12 That'll be super simple because it's just a video.

00:01:14 So I will first define that video ref by saying const video ref is equal to the use ref hook coming from React, which by default we are setting to null.

00:01:28 This ref will allow us to attach it to the video so that we can later on control the video elements playback using GSAP.

00:01:36 super important piece.

00:01:38 I'll turn this div into a section.

00:01:40 And when I say I, I also mean you or we.

00:01:44 So let me know down below this lesson whether you prefer me to say I, we, or maybe I should say something like, next, turn this div into a section speaking

00:01:53 to you.

00:01:54 I really want to know what language you like the best, or maybe you don't really care.

00:01:58 Anyway, we now have to give this section a class name equal to first vd, as in video, wrapper.

00:02:07 And if you go ahead and search for this globally, you'll see that it's being mentioned within the index.css.

00:02:14 where we're simply giving it a full size, making it object cover, so it goes over the entire screen.

00:02:21 And on medium devices, we position it in the center.

00:02:24 So let's render a div with a class name of H, DVH.

00:02:29 And DVH basically refers to the dynamic viewport height, which is the best way to ensure that something takes the full height of the screen.

00:02:37 Within it, I'll display a video and I'll attach a ref to it.

00:02:41 called video ref, as well as give it a muted property.

00:02:46 We don't need any sound.

00:02:48 I'll also set it to place inline and we need to preload it.

00:02:53 So preload will be set to auto.

00:02:56 Source of the video will be forward slash videos forward slash output one dot MP4 and the class name will be equal to first VD.

00:03:07 Now, if you scroll down, you'll be able to see this full height video.

00:03:13 It might not seem super high res, but we don't need it to be.

00:03:17 We need it to be performant.

00:03:18 So sometimes you'll have to make some sacrifices in optimizing the videos to make sure that they're performant.

00:03:24 But of course, it's all about animating them.

00:03:26 So, now that we have this ref, we can bring in GSAP.

00:03:30 I will first import GSAP from GSAP.

00:03:34 as well as import the use gsab hook coming from add gsab react.

00:03:40 Then we'll define this use gsab hook so we can actually start using it.

00:03:44 And I'll also give it an empty dependency array, which means that it'll only run at the start.

00:03:50 And now we can start defining the animations right here.

00:03:53 So first things first, we want to set the initial state of the video.

00:03:57 The video should already start playing off-screen above the viewport with zero opacity.

00:04:03 So I will use the gsap.set, the .firstVD wrapper, and I will give it a margin top of minus 150 VH, so to make sure that it appears above it.

00:04:19 with the opacity of zero, then we'll create a scroll trigger timeline const timeline or TL for short is equal to GSAP dot timeline.

00:04:32 And once again, we'll use the scroll trigger.

00:04:35 So, we'll change things as we scroll.

00:04:38 So, as we learned before, we first have to define how we'll trigger that scroll.

00:04:43 And in this case, we'll trigger it when the first VD wrapper jumps into the viewport.

00:04:51 We'll start it when the top of the wrapper reaches the top of the viewport.

00:04:56 and we'll end it over the course of plus equal to 200% scroll of the top of the viewport.

00:05:03 So we want to scroll it for two full heights of the screen because that way it's going to make it seem like the video is sticking on a single screen but

00:05:12 we're actually animating as we're scrolling down.

00:05:14 I'll also give it a Scrop property set to true and this will allow us to sync the animation with the scroll position, as well as a pin set to true,

00:05:25 because this will keep the section fixed while scrolling.

00:05:27 And now we can use this sequence to animate it.

00:05:30 First, we want to fade out the hero section as this new section comes in.

00:05:35 So I'll say tl.2.hero-section.

00:05:40 We want to set it to a delay of 0.5 seconds, opacity of 0, and the ease of power1.inout.

00:05:50 You can see me using this one quite a lot.

00:05:52 Now, as we're fading this one out, we also want to fade the video in.

00:05:57 So I'll say tl.2 first VD wrapper, and I'll give it the opacity of 1. throughout a duration of two seconds with the ease of power one dot in out.

00:06:11 So now if we save this and scroll down, you can notice that this one fades out very quickly, and then the video should start appearing,

00:06:19 but not just yet, because we first have to animate the video playback.

00:06:24 But we can only do that once the video is fully loaded and we know its duration.

00:06:29 So how can we figure that out?

00:06:30 Well, we can say video ref, dot current dot on loaded metadata.

00:06:38 This will give us access to all of the metadata we need about that video.

00:06:42 And here we can start with the animation TL or timeline dot to video ref dot current.

00:06:49 So in this case, we don't need to target it by a class name.

00:06:52 We can target it by a ref.

00:06:54 And we can change the current time of the video to be equal to videoRef.current.duration throughout a duration of three seconds and ease of power1.inout.

00:07:10 And I'll also make it play with the last animation that we had.

00:07:14 Oh, and just before we test it out, it looks like I missed a dot right here.

00:07:18 So since this animation is playing with this one, we definitely need both.

00:07:23 So head over to the top of the screen, reload, and slowly start scrolling down.

00:07:28 We get this coming soon.

00:07:30 And then as we scroll down, you can see the videos start slowly appearing.

00:07:35 And then as you scroll, it actually plays.

00:07:37 Of course, I actually want to test it out on desktop.

00:07:40 So as you scroll, it looks even better.

00:07:43 And then slowly, the video starts fading in and starts animating.

00:07:48 I'm now just doing it with my mouse wheel.

00:07:50 But if you're in a MacBook or a different laptop, it is even smoother.

00:07:53 I mean, check this out.

00:07:55 You can literally scrub through the video and play it back and forth so the website truly feels alive.

00:08:01 I mean, on its own, this lesson was super useful because you learned how to animate a video on scroll.

00:08:09 And there are so many different applications where that can be super useful.

00:08:13 Let's not forget to commit it by heading over to our source control and saying, implement first video.

00:08:21 commit, and sync.

00:08:23 See?

00:08:24 I told you this one is going to be much shorter than implementing the hero section.

00:08:27 But that's because playing this video is just the first step.

00:08:32 On its own, it doesn't really do a lot.

00:08:34 But once you combine it with the next section, where we actually introduce that character, the video keeps playing, and then it transitions over into images

00:08:43 of that character, Well, that makes a lot of emotional sense, right?

00:08:48 It's a story.

00:08:49 We're seeing that person for the first time, seeing their name as they look into the distance, and then we can learn a bit more about them.

00:08:57 This reminds me of some characters in games that I like to play.

00:09:01 In this case, it is Vaas from Far Cry 3. But yeah, in any case, character development really does make a difference.

00:09:08 And if you think about it, Here, we're doing just that.

00:09:11 What was one of the games that you played either during childhood or right now that had the characters that you really connected with?

00:09:18 Let me know in the comments down below.