00:00:02 Now that we have this great-looking postcard, let's implement the second part.

00:00:06 It's still gonna be within the same background color, so technically we could say it's a second portion of the same section.

00:00:13 You can see how, as we scroll down, then the video plays.

00:00:17 And then this section will open up another on-scroll video where both Lucia and Jason will close this trunk.

00:00:27 And once they do, we then want to fade into black and then show this coming soon section.

00:00:32 So let's go ahead and do it together.

00:00:34 Back in VS Code, create one more section, which I'll call final.jsx and run RAFCE.

00:00:43 Then import it right here within the app, right after the postcard.

00:00:48 Once you do that, we can first implement the UI.

00:00:51 And the UI will be nothing more than a simple video.

00:00:55 So we can actually head over into the first video that we implemented and just copy this entire section with a div and the video.

00:01:04 Once you copy it, you can paste it here and we can just change some class names.

00:01:09 The section class name will say final.

00:01:13 This will give it a full width and height because this is a large video.

00:01:17 We then want to render a div that'll have a class name of final content and the size full.

00:01:25 And then we want to attach a new video ref.

00:01:28 So right here, I'll say const video ref is equal to use ref, which we want to import over from react.

00:01:37 The video will be muted, it'll play inline, we will preload it, and the video will be the output 3, that MP4, with a size full as well as object cover.

00:01:50 So if you've done that properly, you should be able to see just a static video for now, And that's because we're not actually playing it.

00:01:58 We want to play it on scroll, which is, once again, super similar to what we have already done with Jason's and Lucia's videos.

00:02:06 So I'll head over into our first video, and I will copy the part with the animations, the entire use G-SAP hook, and I'll paste it right here.

00:02:18 We'll just have to do some simple tweaks to it, such as importing use gsap from gsap react, importing gsap itself from gsap,

00:02:28 and then changing some class names.

00:02:30 First things first, we want to set the video container as hidden at the start and then fade in as we scroll.

00:02:37 So I will simply change the opacity to zero of a class name called dot final content.

00:02:46 After that, we want to pin the entire section during scroll, which will keep the video fixed as we scroll.

00:02:53 I'll change the trigger to dot final.

00:02:55 It'll be top top, and we can end it when the 90% of the final section reaches the top of the viewport.

00:03:02 So just before the user reaches the very bottom.

00:03:05 In this case, we don't necessarily have to store this timeline into a new variable.

00:03:09 We just need to define it.

00:03:11 And then I'll define another timeline right below.

00:03:15 which I'll call TL and make it equal to GSAP dot timeline within which we want to set the scroll trigger to trigger of dot final.

00:03:27 We'll start it when the top of the section reaches about 80% of the viewport.

00:03:34 So we'll start to fade in when the section is mostly visible and we'll end it before the bottom scroll reaches.

00:03:41 So that's going to be 90%. and top.

00:03:45 And I'll also set the scrub to true so we can sync the animation with the scroll.

00:03:49 Now that we have this timeline, we'll animate both the opacity and scale to reveal it smoothly.

00:03:56 So I'll just keep this one right here and rename it to dot final content, change the opacity to one throughout a duration of one second,

00:04:08 and also change the scale to one with an ease of my favorite power one dot n out.

00:04:14 And finally, we want to scroll play the video once it's loaded.

00:04:18 So I'll say video ref dot current dot unloaded metadata.

00:04:22 TL.2 video ref current.

00:04:25 Take the current time and set it to duration.

00:04:28 Throw three seconds with a power one in out and play it alongside the previous animation.

00:04:33 And here I don't think we'll need this dependency array.

00:04:37 So if you've done this properly, you should be able to see video autoplay and then it'll actually continue playing as you start scrolling down.

00:04:45 And then this new video will appear where it looks like Jason and Lucia did something and they're going to close the trunk.

00:04:53 And we're going to fade into black, allowing us to in the next section, implement this fade out coming soon animation.

00:05:02 So let's do that next.