00:00:02 Let's get started focusing on the most important section of this course.

00:00:06 This animated hero section.

00:00:08 First, we'll start just on the layout and the structure, and then later on we'll animate it using GSAP to create this smooth and interactive experience.

00:00:19 So back within our code, create a new component and call it hero.jsx.

00:00:25 Run RAFCE right within it.

00:00:28 and then just import that hero section right within our app below the navbar by saying hero and auto-importing it right here.

00:00:38 WebStorm does that nicely automatically for me.

00:00:41 Now, let's develop the structure of the hero section by wrapping it in an empty ReactFragment and then within it, creating a new section with an ID equal

00:00:52 to hero so we can scroll to it and a class name equal to noisy.

00:00:57 As you can immediately see, this noisy class name adds a background image that makes it seem a bit old school.

00:01:04 So if you want to see how this noisy exactly works, head over into our index.css, and you can see that it is just applying a full-size noise background image.

00:01:14 Within it, we can render an H1 that will have a class name equal to title, and it can be the name of a cocktail, of your bar,

00:01:24 or whatever you want it to be.

00:01:26 I'll go with something like Mojito.

00:01:28 Sounds interesting and looks good.

00:01:31 Then right below it, I'll render an image with a source of forward slash images forward slash hero left leaf dot png with an alt tag of left leaf and a

00:01:46 class name equal to left leaf as well.

00:01:51 Now you can see that leaf right here at the bottom on mobile devices.

00:01:56 I want to duplicate this image right below and what I'll do is just rename all of the keywords to right instead of left.

00:02:05 So hero right leaf, the alt tag and the class name of right leaf as well.

00:02:11 If you do that, you'll see another leaf appear right here.

00:02:15 Next, below these images, let's render a div that'll have a class name equal to body.

00:02:24 And within it, another div with a class name equal to content, because we're going to put the majority of our content within this div.

00:02:34 So let's create another div that'll help us with the layout.

00:02:38 So we can give it a class name of space-y-5 to create some spacing in between the elements.

00:02:46 It'll be hidden on small devices, but it'll be showing on medium and larger devices.

00:02:52 So we can set it to block.

00:02:55 Within it, I'll render a p tag of cool, crisp, and just classic.

00:03:01 And another p tag below it with a class name equal to subtitle.

00:03:08 That'll render a text of Sip the Spirit with a break of summer.

00:03:16 Yep, that definitely sounds good.

00:03:18 Now, we cannot see it on a mobile device, but if we expand it just a tiny bit, you can now see cool, crisp, classic Sip the Spirit of summer.

00:03:28 And on larger devices, it'll actually get moved to the bottom left.

00:03:33 So we have enough space to show our primary part of the page.

00:03:37 Great.

00:03:38 So now let's head below this div that has the space of Y5.

00:03:44 And let's render another div that'll have a class name equal to view cocktails and the p tag right within it.

00:03:54 That'll have a class name of subtitle.

00:03:58 And here we can put some text.

00:04:00 Now I don't want to just imagine some text or generate it using AI.

00:04:04 So I'll head over into my Figma design and just copy this piece of text that I can see right here.

00:04:10 Every cocktail on our menu is a blend of premium ingredients, creative flair, and timeless recipes designed to delight your senses.

00:04:18 This wasn't written by ChatGPT, not at all.

00:04:22 And below this p tag, we can render an anchor tag that'll have an href pointing to hash cocktails.

00:04:30 and it can say View Cocktails.

00:04:33 So now, if we go back, you can see that we have both the left and the right side, and this will eventually lead to the bottom page,

00:04:40 but we have still left some space for the primary part, which is that drink.

00:04:45 Now, before we show something right here, let's first focus on the animations.

00:04:50 See, if I head over to the final website, you can see that first of all, the primary text animates, then we see the text at the bottom left,

00:04:59 and finally then the text at the bottom right.

00:05:01 So let's animate it.

00:05:03 Right at the top of the hero section, we can use the use gsub hook.

00:05:10 Make sure to import it from GSAP React.

00:05:13 Create a callback function.

00:05:15 And as the second parameter, give it an empty array, which means that this will only have to run at the start.

00:05:21 Next, we can define a couple of different animations.

00:05:25 First, I'll define one called hero split, where we can use the split text GSAP plugin that'll break our text into smaller pieces so we can animate them individually.

00:05:39 So I'll make it equal to new split text, which we have to import.

00:05:44 So I'll say import split text coming from GSAP all.

00:05:50 And don't forget to import the GSAP itself by saying import GSAP from GSAP.

00:05:56 Perfect.

00:05:57 Then I'll say that we want to target the .title class name and we want to split it into both characters and words.

00:06:05 So I'll say type will be chars, characters, and words.

00:06:12 Now we can do the same for the paragraphs.

00:06:14 So I will duplicate this.

00:06:16 I will say paragraphs or paragraph split and make it equal to new split text where we're going to split the subtitle class name into just lines.

00:06:29 not characters, not words, but lines.

00:06:33 What does this mean?

00:06:34 Well, if you take a look at the finished website, notice how we split the first one by each letter, and the other ones are split line by line,

00:06:42 so we don't animate the characters themselves, but only line one, line two, three, four, and so on.

00:06:48 Perfect.

00:06:49 Now that we have split those characters of the hero section, we can actually apply some animations.

00:06:55 So I will say hero split dot chars or characters dot for each character.

00:07:05 We want to apply a class name by saying char dot class list dot add, and I'll apply a class of text gradient.

00:07:16 This text gradient is a utility class within index.css, which adds a bit of a dark gray color to the text.

00:07:24 It'll be applied before animating, so if I reload, you should be able to see that now the letters seem to be a bit more 3D,

00:07:32 as they have a gradient, very slight one, from the bottom to the top.

00:07:37 Now, let's use gsap to animate each one of these characters by saying gsap.from, heroSplit.chars and we want to first set where they're coming from.

00:07:50 So they're starting from y% of 100. They're starting from a duration of 1.8 with an ease of expo.out.

00:08:02 expo.out gives a smooth springy feel and finally a stagger of 0.006. which means that each character will come in after another,

00:08:13 creating a wave effect after 0.06 seconds.

00:08:17 So now if I reload, you can see how already the letters start coming from down below and move up and they align very nicely.

00:08:26 You can totally slow this down by staggering them by one second, for example.

00:08:31 And now we can see exactly what is happening.

00:08:33 Although, please, I beg you, never do this in real production websites.

00:08:38 Even though it might be cool, you want your websites to feel fast.

00:08:43 And if you have long animations, they're just not gonna feel fast.

00:08:47 So I found 0.006 or 5 to work very nicely, just so it's visually interesting, but it doesn't negatively impact the user experience.

00:08:57 Next, let's animate the lines of text of these paragraphs.

00:09:01 So I'll say gsap.from paragraph.

00:09:06 split.lines, we want to animate it from opacity of 0, initially, y% of 100, duration of 1.8, ease of expo.out, stagger of also 0.06, and a delay of 1.

00:09:28 What this delay does, and it's super important, is that it means that it'll start one second after the headline animation finishes.

00:09:37 So now if I reload, you can see that these lines will start animating only a second after this finishes.

00:09:45 If you remove the delay, then everything will happen at the same time, which is just too much to see.

00:09:52 So we want to delay it purposefully so we have this nice animation.

00:09:57 Great.

00:09:57 Next, we want to animate the two leaves in the hero section when the user scrolls.

00:10:03 But for the animation to trigger, the page needs some scrollable content.

00:10:07 So head back over into the app.jsx And let's just add a temporary div with the full height just below the hero section, which will allow us to test the

00:10:19 scroll based animations.

00:10:21 So I'll say div with a class name equal to H.

00:10:27 DVH which is a full height and the BG of black.

00:10:32 So now you can see that we can scroll into nothingness.

00:10:35 This allows us to test the knob bar effects that we have but it'll also allow us to test the scroll on the leaves.

00:10:43 So now we can go back to the hero section and below the animations of the texts we can add the animation for the leaves by saying gsap.timeline this one

00:10:55 will be based on the scroll trigger and we have to watch the trigger on the hero section so once we reach it we will start when the top of the home page

00:11:06 hits the top of the screen and we will end when the bottom of the homepage hits the top of the screen.

00:11:13 And we can also add a scrub to this, which means that the animation progress will be directly related to the scroll, which will make it feel natural.

00:11:23 So what animation do we actually want to give to it?

00:11:26 Well, we can say .2.WriteLeaf will give it a Y of 200 and 0. And then I'll apply another dot to, this time to the dot left leaf.

00:11:42 I'll give it a y of minus 200 and zero as the second parameter.

00:11:48 Now, if you save it and reload.

00:11:51 As you scroll down, you'll notice that the top leaf moves up as we scroll, and the right leaf moves down as we scroll, creating this very interesting effect.

00:12:04 Pretty cool, right?

00:12:06 Almost feels like we're in a jungle.

00:12:08 So, what we have done so far is animated the title as well as the paragraphs below.

00:12:13 We animated the characters and added staggered motion.

00:12:18 And then we use the scroll trigger to animate the movement of these leaves based on the scroll.

00:12:24 These kinds of animations add polish and elevate the user experience, especially on hero sections where the first impressions matter the most.

00:12:34 So I'll go ahead and commit this right now by saying git add dot git commit dash m.

00:12:41 Implement the first part of the hero section.

00:12:47 and git push, so that our members on jsmastery.com can follow along without any issues.

00:12:54 With that in mind, in the next lesson, let's focus on what matters, and that is animating the actual video on scroll.