00:00:02 Okay, so who do we have hiding here?

00:00:05 Who is Lucia?

00:00:07 Let's give the people what they want and share a bit about her life too.

00:00:11 We can start by crafting another section within the sections folder and I'll call it lucia.jsx and I'll run RAFCE.

00:00:22 Then I'll import it right within the app where we already intended to put it.

00:00:29 Make sure to import it right here at the top, and then we can start implementing the layout.

00:00:34 Once again, I want to challenge you to try to replicate what we did with Jason.

00:00:40 So if you open it up right here and put it to the side, you'll notice that we want to do something similar.

00:00:47 We want to have a section, and then we want to have some content about her, and then some additional images that we're going to show as we scroll.

00:00:56 So once again, I'll count to three, pause this video, give it a shot, and let me know how you did.

00:01:04 Three, two, one.

00:01:08 Here the solution comes.

00:01:10 I'll start by replicating everything within this section.

00:01:14 Same thing that we did for Jason.

00:01:17 And I'll paste it right here.

00:01:19 Instead of just saying Jason, I'll say Lucia.

00:01:22 And if I'm not mistaken, in CSS, I actually called it LuciaLife because it talks a bit about her life.

00:01:30 So let me just fix this class name right here.

00:01:32 Now, in this case, the parallax will actually be reversed.

00:01:37 Let me show you what I mean.

00:01:38 Here, we show a bit about Jason.

00:01:43 Technically on the right side, right?

00:01:45 On the right side, we have the images and on the left side, we have the text.

00:01:49 But if you continue scrolling down, you'll notice that for Lucia, we actually show the text on the right and the images on the left.

00:01:58 So to achieve that layout, what we have to do is move this larger div containing the text below these two additional divs.

00:02:08 So I will copy it.

00:02:10 put these two divs at the top, and then put this div right below it.

00:02:15 If you do that, it'll seem like we're talking about JSON, but now we can actually switch it up.

00:02:20 To this first div, wrapping these two inner images, I'll give it a class name of flex, flex-col, a gap of five, items-end,

00:02:34 img-box, so we can target it using gsap.

00:02:37 On large devices, it'll take half the screen and I'll give it a PS, which is padding inline start of 10 to make some space,

00:02:47 as well as a margin top of 96 to separate it a bit from the contents above.

00:02:54 If I save this, you can see that this moves it to the side just a bit.

00:02:57 And then we can display an image that'll say Lucia1 with an image also called Lucia1.

00:03:06 And same thing here, we can do Lucia3 as well as under images, it's going to be Lucia3 as well.

00:03:15 There we go.

00:03:16 That looks better.

00:03:18 Now we can implement the right side column, which is this one right here.

00:03:22 It'll have a class name of on large devices, w of one over two, and it'll say Lucia life content.

00:03:34 Within it, I'll display another div that'll have a class name equal to max-wxl on large devices, padding inline start of 32, and typically a padding inline

00:03:49 start of 10. And within it, we can show all of this information about her.

00:03:54 So I'll head over to the final website, just so I can copy these pieces of text.

00:04:00 The name is Lucia Caminos.

00:04:02 Then a bit more information about her in this H2.

00:04:07 And finally, a full life story in this P tag right below.

00:04:13 Perfect.

00:04:15 So now it looks like this, and we just have to make this last image look a bit better.

00:04:20 So we will exit this div with the content, and then we display an image called Lucia2 and Lucia2 right here.

00:04:31 There we go.

00:04:32 And finally, we want to end it with some additional content about Lucia.

00:04:37 This one right here that Jason didn't have, but heck, we're going to add it for her.

00:04:42 So below this div, I'll render a p tag with a class name equal to maxW of Excel.

00:04:51 And this matters a lot when you're trying to render the text to contain it within a normal width.

00:04:57 Because if you don't apply it, then it'll just stretch across the entire screen and it'll be super hard to read.

00:05:04 So I'll copy this part and just paste it within the p tag right here.

00:05:10 And I'll also apply on large devices, a PS of 32 and usually a PS of 10. So if I save it, now we can see that we're kind of encapsulating this image with

00:05:23 some more text.

00:05:24 So now if we check it out on a large device and scroll down.

00:05:30 You can see that we move over to her section and then we show some text right here.

00:05:35 And if I remove this max WXL, you can see that the text spans over a bit more width than what is easy to read.

00:05:44 So I'll just bring it back.

00:05:46 Perfect.

00:05:48 So now that we have all of the contents or the structure or the layout or the UI, we are ready to actually animate it to make it a part of this video.

00:05:58 So let's do it.

00:06:00 I'll head over to the top of this component, import, GSAP.

00:06:06 as well as, you already know it, use GSAP.

00:06:11 And the fact that we are repeating similar stuff is actually good because you can see that you will be repeating this stuff when you code your own applications

00:06:18 in the future.

00:06:20 And even though this might seem new to you, very quickly you'll see how not everything is new and how things will just start clicking.

00:06:28 Okay, so now let's do similar to what we did with JSON.

00:06:32 I'll define the use gsab hook and to set it up, we first have to move these contents into the video above by saying gsab.set.lucialife and I'll give it

00:06:47 a margin top of about minus 80 VH.

00:06:53 So now it appears right on top of the video.

00:06:57 Then we want to apply the animation, which will fade out the previous video as Lucia section scrolls in.

00:07:05 And I think that's going to be very similar to JSON.

00:07:08 So I'll head over into the JSON section.

00:07:10 Well, you know what?

00:07:11 I'll simply copy the other two parts that we have right here, where we define the timeline and where we define how this box moves in.

00:07:20 You can do the same.

00:07:22 And then just paste them right below.

00:07:25 We'll go through them one more time together.

00:07:27 So we create a new timeline with a scroll trigger of the Lucia life section.

00:07:33 I'll set the scrub to two.

00:07:35 And since Lucia section is a bit longer, I'll actually start it when the top of the section reaches about 80% of the viewport so we can kind of show more

00:07:44 of it as we scroll.

00:07:45 The rest will be the same.

00:07:47 In this case, we want to fade out the second video, not the first one, to the opacity of zero.

00:07:54 And then we want to animate the Lucia life section within the image box with a scroll trigger of Lucia life, top center,

00:08:05 80 center, scrub two.

00:08:08 In this case, it's going to be minus 200. I found that value to work the best throughout a duration of one second and apply it alongside the previous animation.

00:08:18 So if you now reload and start scrolling down.

00:08:23 You can notice that the video will start fading out as these images come in over it, and then these two move a bit up, and then we have the full section.

00:08:34 Keep in mind, this is a very, very, very narrow phone.

00:08:38 Nobody has phones this narrow nowadays, unless you're maybe using that small back screen of a foldable Samsung phone.

00:08:46 But of course, let's check it out on desktop.

00:08:49 If you scroll down, Jason introduces himself.

00:08:52 Then we have Lucia Caminos.

00:08:55 Her father taught you to fight as soon as she could walk, and life has been coming at her swinging ever since.

00:09:03 Fighting for her family, planted her in Leonidas' penitentiary.

00:09:07 Luck got her out.

00:09:09 But she learned her lesson.

00:09:12 Only smart moves from here.

00:09:13 So she's prepared to take the matters into her own hands.

00:09:19 Wonderful.

00:09:20 So now we have recapped our knowledge with Jason, and we have completed this couple.

00:09:25 If Jason wants to learn GSAP, what do you think Lucia should do?

00:09:31 Should she also try to help him with GSAP or should she maybe go into graphic design so together they can open an animation agency?

00:09:39 Anything's better than prison, I guess.

00:09:41 But with that in mind, let's go ahead and commit this lesson by saying, implement Lucia, commit and sync.

00:09:51 And with that, we are ready for the next section, which is quite interesting.

00:09:56 So congrats on coming this far.

00:09:58 Take a bit of a break.

00:09:59 Hopefully I didn't get you too excited with this one.

00:10:02 So once you rest a bit, or maybe if you're doing this course late into the night, you want to take some sleep, come back tomorrow and let's continue with

00:10:11 this next amazing GSAP lesson.

00:10:13 Congrats.