00:00:02 Okay, this hero section and its corresponding animation are the money shot.

00:00:07 It's what makes this whole page shine.

00:00:10 So let's start with this very simplistic nav bar.

00:00:13 We have a logo at the top left and a hamburger icon on the top right.

00:00:17 To achieve the same layout, head over into the app.jsx and instead of this H1 and instead of the div, right within this main,

00:00:26 let's just create a new nav tag.

00:00:30 Within it, render an image with a source of forward slash images, forward slash nav dash logo dot SVG, which we now have access to because we have imported

00:00:42 all of the assets.

00:00:43 And let's give it a class name equal to scale of 90. Right beneath it, let's render another image that'll have a source of forward slash images,

00:00:54 forward slash menu dot SVG.

00:00:56 with a class name of W of 10 for the width.

00:01:01 If you now save this, so if you head back over to your application, you should be able to see a simple logo at the top left and a photo representing what

00:01:10 is about to become a hamburger menu on the top right.

00:01:13 The non-par is pretty simple, but now let's focus on this entire hero section.

00:01:18 For all of these components that we're going to create, we'll focus on building the layout and the structure first.

00:01:24 And then later on, we'll animate the sections using GSAP to create those smooth and interactive experiences.

00:01:31 So let's create a new folder right within the source folder, and let's call it sections.

00:01:37 Within sections, I'll create a new file called hero.jsx.

00:01:43 And inside of it, run RAFCE to quickly spin up a new React component.

00:01:49 Then import it right here beneath the nav.

00:01:53 So I'll just say hero and it'll auto import it for me coming from sections hero.

00:02:00 Now, if you head back to the website, you'll barely be able to see it because it'll be stuck on the top left.

00:02:05 Just a little dark text that says hero.

00:02:07 As a matter of fact, this nav bar can also be a section on its own in case we decide to extend it later on.

00:02:13 So within sections, I'll create a new section called navbar.jsx Run RAFCE, and within it, I will just paste what I copied.

00:02:24 It's a simple nav with two images, which we can now add right here on top of this hero by rendering the navbar.

00:02:33 Oh, and don't forget to import it by saying import navbar, coming from sections, navbar.

00:02:41 Perfect.

00:02:41 Now let's dive right into the hero and let's start implementing the layout.

00:02:46 First, I'll make this div into an HTML5 semantic section.

00:02:50 This helps you with making sure that the accessibility is good and that we nicely differentiate some different parts of our website.

00:02:58 I'll also give it a class name equal to hero section.

00:03:03 Oh, and it'll be pretty cool to see what we're doing, right?

00:03:06 So this might be a pretty good time to put the browser side by side with our editor so we can see the changes that we're making live.

00:03:12 There we go.

00:03:13 We have a dark background, no more flashes of white.

00:03:16 So now within this hero, let's render a div.

00:03:20 And this div will have a class name equal to size-full.

00:03:25 So it takes the full height and the width of the screen.

00:03:28 We have defined this class name within our CSS file, and you can see exactly what it does.

00:03:33 If you hover over it, it's width and height 100%. And we can also have something known as a mask wrapper.

00:03:40 What this mask wrapper class will do is it'll generate a mask around this specific image, bigherotext.svg, and we won't repeat it.

00:03:51 In other words, check out how this background actually shows up within this logo that we have right here.

00:03:57 We'll accomplish this effect using the mask of this SVG title.

00:04:02 More on that soon.

00:04:03 Next, within this div, let's render a self-closing image with a source of images.

00:04:11 hero-bg.webp.

00:04:14 I would always recommend you to use WebPs instead of any other image format, especially for websites with heavy animations or with a lot of graphics,

00:04:23 because WebP is the new modern standard of optimized web images.

00:04:28 And let's also give it a class name equal to scale-out.

00:04:33 We'll use this class name so we can then scale it out as we scroll.

00:04:36 But you can see the logo image right here.

00:04:38 Below that image, I'll render another image.

00:04:41 that'll have a source equal to forward slash images, forward slash hero dash text dot webp.

00:04:50 I'll also give it an alt tag of hero logo and a class name equal to title dash logo as well as fade dash out.

00:05:01 We'll use this class name to target these elements later on with our GSEP animations.

00:05:07 Okay.

00:05:07 So now we can see something is happening, but not a lot quite yet.

00:05:11 And we also need to provide an alt tag to this first image.

00:05:14 It is always recommended to have alt tags for screen readers or in case the image doesn't properly load, which in our case would be a real shame because

00:05:23 images and animations make the whole thing happen.

00:05:25 So I'll just say something like background.

00:05:28 If you want to, whenever they start splitting into multiple lines, you can just render these different parameters.

00:05:34 each in its own line, so it's a bit easier to see what is happening in case you want to, but either way is totally fine.

00:05:41 For now, I'll keep it as is.

00:05:43 Below it, I'll also render another image with a source of images, forward slash, watch-trailer.png.

00:05:55 with an alt tag of trailer and a class name equal to trailer-logo as well as fade out.

00:06:03 Once again, we'll use this to apply an animation.

00:06:06 And now beneath these three images, we can display another div that'll have a class name equal to play-img and also fade out.

00:06:17 And within it, we'll display an image that'll have a source of forward slash images, forward slash play.png with an alt tag of play.

00:06:27 and a class name equal to W7 for width, as well as margin left of 1 to divide it a bit from the left.

00:06:36 I mean, this doesn't yet look super cool on mobile devices, but as soon as you expand it to desktop, it definitely looks better.

00:06:43 What we have to do is still animate it on scroll.

00:06:47 That's what's going to make a big difference.

00:06:48 For now, I'll bring it back to mobile.

00:06:51 And I'll head below this outer div that wraps this entire mask wrapper section.

00:06:57 And I'll create another one within which I'll display another image that'll have a source of images, bigherotext.svg with an alt tag of logo and a class

00:07:11 name equal to size-full, object-cover, and mask-logo.

00:07:17 Within that div, I'll display one more final div.

00:07:21 that'll have a class name equal to fake logo wrapper, as well as within it, an image that'll have a source of forward slash images forward slash big hero

00:07:36 text dot SVG.

00:07:38 and a class name equal to overlay-logo.

00:07:42 Oh, that's not overlay.

00:07:44 It's going to be overlay.

00:07:46 And right now, still we can see a lot of things.

00:07:49 And unfortunately, sometimes that is the case when you're animating things.

00:07:53 At the start, they're not going to look the best, but then when you apply the animation, it'll start making more sense.

00:07:58 Like here, we also have to immediately focus on the layout of the coming soon section because we're going to animate all of these logos and backgrounds

00:08:07 to go into this coming soon section next.

00:08:10 So let's go ahead and code that section out as well.

00:08:13 I'll put it right here beneath the last div, but let's turn it into a new section, which I'll call coming soon dot JSX.

00:08:22 I'll run RAFCE.

00:08:24 And then I will simply import it within this hero section by saying coming soon, and then we can start implementing it.

00:08:32 This one will also be a section of its own that'll have a class name equal to entrance-message.

00:08:42 Within it, I'll display a div.

00:08:44 that'll have a class name of h-full, so it'll take the full height, call-center, which means that it'll be the center column,

00:08:53 and a gap of 10 between the other elements.

00:08:57 So within it, we can display an image.

00:09:00 That'll render a source of forward slash images, forward slash logo.webp with an alt tag of logo and a class name equal to entrance dash logo.

00:09:14 If you want to see what each one of these classes does, you can just search for it across the entire file system.

00:09:19 And then you'll find it right here within our index.css.

00:09:24 In this case, it's mostly just responsive properties, like on two Excel devices, meaning devices with a width larger than or equal to 1500 pixels.

00:09:36 In that case, we want to give it a width of 288 pixels.

00:09:40 On larger widths, we want to increase it more.

00:09:43 On smaller widths, we want to decrease it and so on.

00:09:46 So we're mostly just playing with different positioning of these elements on different screen sizes.

00:09:51 Beneath this image, I'll display another div.

00:09:55 that'll have a class name equal to text wrapper.

00:09:59 And within it, I'll display an H3 that'll have a class name equal to gradient-title.

00:10:08 And within it, we can say something like coming with a break tag in between.

00:10:16 May 26th with another break.

00:10:19 to really make it stand out, not 2024, not 2025, but rather 2026. And I know that we can't see this section yet, but we'll be able to see it as soon as

00:10:31 we start adding the animations.

00:10:32 Now head below the div that's wrapping this H3 and create another div.

00:10:39 That'll have a class name equal to flex dash center and a gap of 10. And right here, we can render an image with a source of forward slash images,

00:10:50 forward slash PS dash logo dot SVG.

00:10:55 with a class name equal to on medium devices, W of 32 and on regular devices, W of 20. And we can duplicate it and do the same thing for the logo for X.

00:11:09 And this one will be a bit larger, W 52 and 40. I found those values to work the best.

00:11:16 So what we're referring to here are these logos of PS5 and Xbox.

00:11:20 So now you can see how we're developing this logo right here at the top, the coming soon, each in its new line, and then finally the logos of the systems

00:11:30 where you'll be able to play the game.

00:11:32 And just before we start animating, I want to make sure that you have access to one special file.

00:11:37 It'll be a file within a new folder, which we can call constants.

00:11:41 And within constants, you can create a new file called index.js.

00:11:46 In here, you can put anything that you think could be reusable across different sections.

00:11:50 For example, here we can define some responsive values that then within our components, we can pay attention to.

00:11:57 So within this lesson, you'll be able to find this index.js file.

00:12:01 which just imports the use media query hook from the React responsive library that we installed before.

00:12:08 And then we create this new hook on our own called use mask settings, where we define that we're going to consider something a mobile device if they have

00:12:18 a max width of no more than 768 pixels.

00:12:21 And we'll consider something a tablet if they are larger than that and lower than 1000 pixels, and then everything beyond that will be considered a desktop.

00:12:33 So with doing these animations, sometimes it's not easy to make it work on all different kinds of devices because you're working with images which have

00:12:43 different widths and heights.

00:12:44 So you have to be very careful in how we're going to shape or move those images across different device sizes.

00:12:51 So after some trial and error, I came up with some values like the initial positions, thus initial sizes, and then final mask position and sizes that work

00:13:02 across mobile, tablet, and desktop.

00:13:06 You can see that on mobile, for example, the final mask size can be larger, 50-50.

00:13:12 On tablet, it's 30-30.

00:13:14 And then on desktop, it is even smaller, taking less percent of the screen.

00:13:18 But now that we have this, let's actually dive into animating things.

00:13:21 We'll do the majority of animations directly within the section that we are implementing.

00:13:27 In this case, it's going to be the hero section.

00:13:30 So first things first, don't forget to import the main library, GSAP coming from GSAP.

00:13:36 In this case, we're using GSAP within React.

00:13:39 So you'll also have to import the use GSAP hook coming from GSAP React.

00:13:43 Since GSAP is completely framework agnostic, and by the way, you could have built this application in Vue, Next.js, Angular,

00:13:51 or something else.

00:13:52 It would totally work.

00:13:53 But in this case, I'm showing you how to do it in React.

00:13:56 Since GSAP is completely framework agnostic, sometimes it can be hard to use it without some extension.

00:14:02 In this case, we're using the extension for React that makes it easier for us to interact with GSEP classes within the React ecosystem.

00:14:10 First things first, let's not forget to import those values about different mask positions from this constants file we created.

00:14:18 We can get it by saying const and then these structure some values by calling the use mask settings like this.

00:14:28 And don't forget to import the use mask settings coming from dot dot slash dot dot slash constants.

00:14:36 Within it, we can extract all these values that we're passing.

00:14:39 Those are going to be the initial mask position, initial mask size, and then final mask position and mask size.

00:14:46 So I'll just copy all of these.

00:14:48 and just use them right here, but of course we have to use commas to separate them within object destructuring.

00:14:55 Perfect.

00:14:56 And I'll make the text size just a bit smaller so it fits into one line right here.

00:15:00 Now we are finally ready to start animating.

00:15:03 The way you start applying animations in React using G-SAP is by using the Use G-SAP hook.

00:15:11 It works something like this.

00:15:13 You define it just as you would the regular useEffect hook.

00:15:16 You say useGSAP and define a callback function right within it.

00:15:20 And then you can use the regular library to do whatever you want right here, such as set the mask wrapper to its full size and starting position at the start.

00:15:30 So for that, we'll use the set method.

00:15:33 If you hover over it, you'll see what it does.

00:15:36 The set method immediately sets the properties of the targets to the properties specified.

00:15:41 In this case, we want to set the element that has a class name of mask-wrapper.

00:15:50 Which one is this?

00:15:51 We can search for it.

00:15:52 It is this div right here that contains all of these primary images.

00:15:57 we want to set it to the initial values.

00:16:00 So, I'll open up a new object, and set the mask position to be equal to initial mask pose, and set the mask size to be equal to initial mask size.

00:16:13 And just like that, our site will now start making so much more sense.

00:16:17 And why is that?

00:16:17 Well, that's because this mask wrapper all along was supposed to be starting at these different positions.

00:16:23 But we were not just able to take these positions from here, for example, say 50% and minus this value, because we didn't yet know on which device we're

00:16:34 working with.

00:16:35 So if we set them the same for mobile, desktop, and tablet, it would not look good.

00:16:40 So what we had to do instead is attach a class name to this div.

00:16:45 figure out on which device we're on, and then use GSAP to set those initial values.

00:16:51 So now on desktop, it's going to look good.

00:16:53 On tablet, it's going to look good.

00:16:55 And even on mobile, it'll look good.

00:16:57 Next, we want to hide the SVG mask logo off the screen and make it invisible.

00:17:02 This one you see that is now floating at the background.

00:17:06 So I'll say gsab.set.mask-logo.

00:17:11 And we want to give it a margin top of minus 100 VH.

00:17:16 So we're putting it off the screen and setting the opacity to zero.

00:17:21 And this is referring to this mask logo that we see right here at the bottom.

00:17:25 And another thing we want to do at the start is just to reset the entrance message for its later animation.

00:17:31 So I'll say gsep.set.entrance-message and set the margin top to be equal to 0 or in this case, 0vh, although it should be the same.

00:17:45 So now we have basically reset some values or set them initially so that we have a nice starting position to start applying those animations.

00:17:53 But to actually apply these animations, we'll use something known as a timeline.

00:17:58 So still within the same use gsub hook, but below this latest gsub set, I'll define this new timeline by saying const tl as in timeline is equal to gsub.timeline

00:18:12 and you define an object.

00:18:14 Specifically, we'll modify the timeline based on the scroll trigger, which is the gsub plugin that I was telling you about at the start.

00:18:21 This timeline will be pinned to the hero section, and it has to scrub as we scroll through the screen.

00:18:28 So let's define it.

00:18:29 I'll say that the trigger for this scroll trigger will be the hero section.

00:18:35 We want to start the animation once the top of the viewport reaches the top of the hero section, which means at the start.

00:18:44 I'll give it a scrub of 2.5 as well as the end of plus equal to 200%. And I'll give it a pin equal to true.

00:18:54 So let me explain each one of these properties.

00:18:58 The trigger hero section tells GSAP which element to watch for scrolling.

00:19:04 For example, we'll start the animation when the hero section enters the viewport.

00:19:10 The Scrub 2.5 syncs the animation to the scroll progress with a smoothing delay of 2.5. Think of it as a lag effect.

00:19:19 The animation follows the scroll but catches up gradually.

00:19:24 The startTopTop defines when the animation should start.

00:19:28 It means that it should start when the top of the hero section hits the top of the viewport.

00:19:35 The endPlus200% defines when the animation should end relative to the starting point.

00:19:42 plus equal to 200% means that we should keep the scroll trigger animation going for 200% of the viewport height after their start.

00:19:51 And can you think of why is it 200%? Well, if you take a look at the screen, this is the current 100%. And then we want to keep it scrolling until we reach

00:20:02 all the way to the end of the second section, which also has another full view height.

00:20:07 So we're technically animating two sections into one, which is why we want to keep the animation going even after the original hero section exits the viewport.

00:20:16 And finally, it's not a pint.

00:20:18 It's going to be pin to true.

00:20:20 What this does is it'll freeze or pin the trigger element in place while the animation is happening.

00:20:27 This is useful for creating scroll-based scenes where the content stays fixed while things animate.

00:20:34 And now that we have the timeline, we are ready to start defining how the animation will flow.

00:20:40 First, we want to fade out the initial text and buttons, which is this logo, the trailer button, and the play button.

00:20:48 To select our targets, we have given them the fade out class name.

00:20:53 So if you search for fade out, you'll see that we're mentioning it three different times for this image at the top, this image in the middle,

00:21:01 and this image at the bottom.

00:21:03 So right below this timeline, I will say tltimeline.to dot fade out, and we want to give it the opacity of zero, as well as ease of power one,

00:21:19 dot in out.

00:21:20 So what this will do is it'll fade those elements out.

00:21:24 You can see that already we can now scroll down and only after we reach the 200% full scroll, then this parameter of opacity zero will be fully applied.

00:21:36 Makes sense, right?

00:21:38 Pretty cool.

00:21:38 So already we can start seeing some brief animation happening, although it's not that cool yet, because in the place where we're hiding these or fading

00:21:47 them out, we should be showing something else.

00:21:49 For example, we should be scaling the background image.

00:21:53 So you can actually chain the two methods onto this timeline.

00:21:58 I like to put it into a new line and then you can just chain them by applying another two.

00:22:04 In this case, I'll say scale out and I'll change the scale to one because initially I think we have it at 0.8 or something.

00:22:13 And I'll add the ease of power1.inout.

00:22:18 Now, if you test this out on mobile, you won't see any changes.

00:22:21 But on desktop, if you reload the screen, that is very important, and then scroll down, you'll notice that at the end, the image will scale out.

00:22:30 So we actually bring it back to the size of 1, so it looks like I was mistaken.

00:22:34 We don't start from 0.8. we actually start larger.

00:22:38 So if you search for scale out, you'll see that initially the scale is 125, and then we bring it back to 1, effectively zooming it out.

00:22:46 Next, we want to animate the mask size from huge image to small, shrinking it into place.

00:22:53 We can do that by saying .2, dot mask wrapper, and we want to give it a mask size equal to.

00:23:02 Now you could define any kind of a regular value here for the mask size, but again, it's going to depend on the screen size.

00:23:11 So thankfully we already have the mask size defined right here at the top, which we're getting from this use mask settings hook.

00:23:19 And then I'll also give it an ease of power one dot in out.

00:23:24 Now, there's one very important little point that we're missing from this .to method.

00:23:31 And that is that once you complete it, right here after this object, you want to add a string and then use the lower than sign.

00:23:39 So what does this mean?

00:23:40 Well, this means that we want to start this MaskWrapper animation at the same time as we start the previous one.

00:23:48 Think of it like this.

00:23:49 Overlap with the previous animation instead of waiting for it to finish.

00:23:54 Kinda it's like pointing to it, right?

00:23:56 Because if we don't have this, and if you start scrolling, you'll notice that this animation will only happen at the end.

00:24:04 There we go, we just went into the darkness, near the end of the screen.

00:24:08 But, if we add this little sign here, this zoom out masking effect will start happening much sooner.

00:24:17 Like here.

00:24:18 And already we have something that looks very, very close to what we have with the final website.

00:24:25 This is pretty crazy.

00:24:27 And all of this is combined off of many little pieces.

00:24:30 Like we have a background image.

00:24:32 Behind it, we overlay this SVG logo.

00:24:35 On top of it, we show this trailer logo play.

00:24:39 And then at the bottom, we have this watch trailer.

00:24:41 We slowly start zooming out these elements as we scroll.

00:24:45 Maybe I'm scrolling a bit too smoothly, but as we start going a bit down, we start zooming it out.

00:24:52 And at the same time, as we're zooming it out, we're also applying an SVG mask in the shape of a GTA logo so that it appears like the background is falling

00:25:04 into it.

00:25:05 And then as we zoom it out completely, we just pin it right here on the screen.

00:25:11 I mean, just how crazy is that?

00:25:13 And let's be honest, AI won't be approaching this level of animation anytime soon.

00:25:19 It's such a beautiful and such a powerful animation because it's so human.

00:25:25 Like, the fact that we're masking this and zooming it out at the same time feels like we are slapping this background image onto this logo.

00:25:33 Pretty cool.

00:25:33 Hopefully, I'm not too amazed so that you're amazed with me as well.

00:25:37 Let me know in the comments down below, if you reach this point, and like, what do you think of this animation that we have so far?

00:25:43 But we're not done just yet.

00:25:45 Let's apply another dot to, in this case, referring to the mask wrapper.

00:25:51 So the same one that we used above.

00:25:53 And here, what we'll do is, once the transition is complete, we want to fade out the entire mask container by simply setting the opacity to be equal to zero.

00:26:05 after we end this animation.

00:26:06 And then, underneath that, we want to fade in a large overlay logo by saying dot two, dot overlay logo, with the opacity of one.

00:26:20 And we want to make it start happening at the same time as the previous animation.

00:26:24 So that's going to be an arrow pointing to the left.

00:26:27 So if you scroll down right now, you'll see that this new logo will appear, which makes it look good even on mobile.

00:26:35 But of course it is that much more effective on desktop because as this big logo kind of fades out, you can see that this one takes its place.

00:26:44 And the animation will be even more smooth as we finally animate in our entrance message with a subtle radial mask reveal.

00:26:53 Let me show you what that means.

00:26:55 So I'll say .to entrance.

00:26:59 message, and we'll give it a duration of one second, an ease of power1.inout, and we want to give it a mask image, which this time will be set to a radial gradient,

00:27:15 and we can define the values of that gradient right here.

00:27:19 So like, what is this radial gradient?

00:27:22 Well, think of it like you're applying a CSS radial gradient mask.

00:27:26 We wanted to create a circular mask.

00:27:29 So we'll say circle at 50%. That's going to be horizontally and vertically at the top for 0vh.

00:27:37 So we can say 50% 0vh.

00:27:40 The mask will be fully visible, so we can do comma black, up to the 50% of the radius, and then it'll fade to transparent when it reaches 100%. This will

00:27:54 result in revealing the element in a circular, spotlight-like way from the top.

00:27:59 And we can start it at the same time that we started the previous animation.

00:28:02 And now, if you go back and reload, as you start scrolling down, we now, for the first time, will see this coming soon text.

00:28:11 But notice how it reveals itself.

00:28:13 It doesn't just come up on the screen.

00:28:15 Check this out.

00:28:17 I'll be very slow.

00:28:19 It actually reveals itself within a circle.

00:28:23 What effect is this making?

00:28:25 Well, think of it as like spotlight is shining on top of it.

00:28:29 And then we're not done yet.

00:28:31 The spotlight is shining on the May 26th, but then we take this logo that we've had before and add a background to it, indicating that this is not any

00:28:42 kind of a Grand Theft Auto game.

00:28:44 This is, wait for it.

00:28:48 a Grand Theft Auto 6. I mean, talk about emotion-driven design.

00:28:54 Every single little microanimation here makes a lot of sense and makes such a big difference in the overall picture.

00:29:02 So one more time, as the timeline plays, this last .2 method smoothly animates this entrance coming soon message.

00:29:12 that appears from the bottom in a circular gradient mask in sync with the previous animation.

00:29:19 Oh, and I can see that this Xbox image is not rendering.

00:29:21 So if I head back over to coming soon, it'll be X dash logo right here, which I missed.

00:29:28 So if you do that, it should be here and it's going to look even more complete.

00:29:32 So let's check it out one more time.

00:29:35 Grand Theft Auto, we scroll down, hide these elements, start scaling out the background, start masking this through an SVG of the Grand Theft Auto logo,

00:29:46 we pin it on the screen, we show another one on top of it, we spotlight show the coming soon, and finally we show this background image behind the original

00:29:57 Grand Theft Auto logo.

00:29:58 Pretty crazy, if I may say so myself.

00:30:02 Now we have to make sure that this animation looks good on mobile as well.

00:30:05 So as we scroll down, okay, jumps out, and then we can see this logo, but then both are still visible.

00:30:13 So there's definitely a little fix that we need to make to make it look good on mobile as well.

00:30:18 And to fix it, we can head back over into the hero.jsx.

00:30:23 And right here where we have this overlay logo, I'll show you one more cool trick.

00:30:28 And that is that we can do something when we finish an animation.

00:30:33 Check this out.

00:30:33 We have the opacity of 1 right here, so we're animating from 0 to 1. But then, at one point, the entrance message pops up.

00:30:43 And it also shows another logo that we want to display.

00:30:47 So as we're showing the logo of the entrance message, once we finish this one, we want to hide it.

00:30:52 So what I'll do is say on complete, we'll define a callback function.

00:30:58 And then within it, you can use another gsab.to to set the dot overlay logo to have the opacity of zero.

00:31:07 So we're essentially just hiding it.

00:31:09 Let me show you how that looks like.

00:31:11 If we now reload and slowly scroll down, you'll notice that this fades out.

00:31:16 Then we start seeing the logo animate.

00:31:19 We go into the dark screen, and then this new logo replaces the old one.

00:31:24 Check this out.

00:31:25 We scroll in, and the logo changes.

00:31:28 I think this is amazing for now.

00:31:30 We might do some tweaks later on to polish it even more, but once again, where this website truly shines is on desktop.

00:31:38 Just check this out.

00:31:41 So with that in mind, the hero is now complete and we are ready to move over to our second section, which will be all about animating a video on scroll.

00:31:52 Huge props to you for coming to the end of this lesson.

00:31:55 It was the first one, but maybe also one of the biggest ones in the entire course.

00:31:59 So give yourself a pat on the back and maybe grab another coffee or take a bit of a break because you've deserved it.

00:32:05 Now, before I let you go, just don't forget to commit your changes.

00:32:10 We don't have to use the terminal anymore.

00:32:11 You can just open up the source control right here and type in your commit message there, or just auto-generate it.

00:32:18 In this case, I'll say something like implement hero section, commit and sync.

00:32:26 Perfect.

00:32:27 Now we can take a break and I'll see you in the next lesson, where we'll animate that video on scroll.