00:00:02 In this lesson, I'll teach you how to implement this postcard session.

00:00:07 It might seem just like a regular image, but as you initially scroll down to it, check this out.

00:00:13 It actually moves and you can see the birds flying by and the boats moving.

00:00:18 So to get started with implementing it, create a new section in the sections folder and call it postcard.

00:00:27 dot JSX and run RAFCE.

00:00:31 Then just import it within our app dot JSX as postcard.

00:00:36 Perfect.

00:00:37 And now we can dive into it and implement the UI first.

00:00:41 So opening up our browser on the right side, I'll first create a new section that'll have a class name equal to postcard.

00:00:50 And within it, I will display a self-closing div that'll have a class name of AnimatedGradientBG.

00:00:59 If I save this, you'll see that this new section will now get this gradient background, which on desktop looks something like this.

00:01:06 And it even flies over to the previous section until it stops, because this section technically jumps out onto the second one.

00:01:14 Then, beneath it, let's create the main content card with a hover effect by creating a div, that has a class name equal to postcard wrapper group On hover,

00:01:28 we will rotate one.

00:01:31 On hover, we'll also scale it by just a little bit, like 1.02, and we'll apply a transition over a duration of 700 milliseconds.

00:01:42 Yep, you can do some simple animations on hover effects using Tailwind 2. And then within it, I'll display an image with a source of forward slash images,

00:01:53 forward slash overlay dot webp.

00:01:56 And now we have this frame that we want to place the video within.

00:02:00 So let's create a new video ref for the video by saying const video ref is equal to use ref coming from react at the start equal to null.

00:02:12 And again, you can notice that whenever we have a video or something that we want to control, you want to create a ref and attach it to it so that later

00:02:20 on we can target it using GSP.

00:02:22 So just below this image, I'll create a new video that'll have a ref equal to video ref.

00:02:29 It'll be muted.

00:02:31 It'll play in line.

00:02:32 We want to preload it to auto.

00:02:36 and give it a source of forward slash videos, forward slash postcard dash vd dot mp4.

00:02:44 And now you can see this video right here, which right now is not moving.

00:02:48 Finally, just below it, we want to add some kind of a call to action button so we can explore this map.

00:02:56 I'll give it a class name of group-hover.

00:03:00 And I want to apply a BG yellow when we hover over that group with a transition throughout a duration of 700 milliseconds.

00:03:10 And it can say something like, explore Leonida keys.

00:03:16 So now if you're on desktop, we're going to assume that you have a bit more space and then the button will be shown here.

00:03:22 so that as soon as you hover over this group, over the postcard itself, then immediately the button also changes the color.

00:03:30 And then maybe when you click it, we want to open up some kind of a 3D map.

00:03:33 But on mobile, of course, we don't have enough space, so we'll have to keep it as it is without a button.

00:03:38 So let's go ahead and animate it.

00:03:40 I'll go ahead and make my browser just a tiny bit bigger to replicate more normal phones and not so narrow ones.

00:03:46 And we can start applying animations.

00:03:48 First, I will import gsap coming from gsap, as well as import use gsap coming from gsap-react.

00:03:58 We can then define this use gsab hook and then start defining the timeline of how our animation will behave by saying const TL is equal to gsab timeline.

00:04:10 And then within it, we can define a new scroll trigger animation where we will trigger the animation when the postcard class or rather we'll start it when

00:04:23 the top of the postcard class enters the middle of the viewport.

00:04:27 and we will end it when the bottom of that class reaches the center of the screen.

00:04:32 And I'll set scrub to true so we can nicely animate on scroll.

00:04:36 As usual, when animating videos, we have to first fetch it.

00:04:40 And we have done this a couple of times.

00:04:43 This part right here, video ref, load it, and then move it.

00:04:47 So I'll just copy it from the first video and then paste it right here below the timeline.

00:04:52 Video ref dot current dot onloaded metadata, timeline dot two, video ref dot current.

00:04:59 And then we want to change the time to the total duration, set it to maybe three seconds with an ease of power one dot in out.

00:05:07 As you can see, a lot of things that we're doing on this website, no matter how custom and animated it looks like, is gonna be more or less the same.

00:05:16 That's why this project is absolutely amazing and it shines.

00:05:21 But the real learning will happen within the first part of this course, where we actually dive into the lessons and the theory and how all of these animations

00:05:31 truly work behind the scenes.

00:05:33 This is just where you're implementing them.

00:05:35 And when you actually implement them, you can see that it's just about repeating some stuff and making it look good.

00:05:41 If you check it out on full screen, you can see that there's only a bit of video movement happening after the video crosses the middle of the screen.

00:05:49 Right now, that doesn't make a lot of sense because this is the last section that we have.

00:05:54 But as soon as we implement the additional section that's about to come after this one, then you'll see the movement as you exit this postcard and move

00:06:01 over to the next section.

00:06:03 But just in case you want to make it look better immediately, We could auto play it.

00:06:08 So just add the auto play tag to the video component and reload.

00:06:12 That way video will play for three seconds immediately and maybe just remove the loop property because it'll only last three seconds.

00:06:20 So there's going to be abrupt stops and starts.

00:06:24 So if you do this, it'll play for three seconds and then it'll pause.

00:06:27 But then as you start scrolling down again, it'll start playing as you move.

00:06:31 So we get the best of both worlds.

00:06:33 So with that in mind, we have completed yet another section of this amazing GTA 6 landing page.

00:06:40 So let's not forget to commit the changes.

00:06:43 Head over to the source control and say, implement postcard.

00:06:48 Commit and sync.

00:06:50 Just a few more to go.