00:00:02 Let's dive into the Art section of this course.

00:00:06 It's pretty exciting, to be honest, because it's one of the sections that is different from the other ones.

00:00:10 To this one, we just applied a timeline and show the elements one after another in a specific timeframe.

00:00:16 But for this one, will actually unlock the entire section that's behind it, using something known as a mask.

00:00:24 So if you check out the final version, it'll look something like this.

00:00:27 We go to the section we have developed just before, and then as you start scrolling, you can see the art section, and you think that's it,

00:00:34 right?

00:00:35 But then as you continue scrolling down, You'll notice that a mask of this image appears and it seems like you're entering into the world of this barman

00:00:45 creating the cocktail just for you.

00:00:47 So let's build it.

00:00:49 I'll create a new component right within the components folder and I'll call it art.jsx.

00:00:56 Within there, you know the drill, I'll run RAFCE to quickly spin it up, and then I'll import it over within our app.

00:01:05 That's going to be art, just like this.

00:01:08 And then we can enter into it and start creating it.

00:01:11 So first things first, we have to give this div an ID equal to art, so we can scroll through this section later on through our nav bar.

00:01:19 And then within it, let's render a div with a class name equal to container, margin X of auto so we center it horizontally,

00:01:29 height of full, and a padding top of 20. Within it, we can display an H2 that'll say the art.

00:01:39 And we can give it a class name equal to WillFate.

00:01:44 Now, if we reload our application and scroll down, you can see just the art headline right in the middle.

00:01:51 But now below it, let's render some more content.

00:01:54 So I'll render a div that has a class name equal to content, And within it, it'll have a UL, an unordered list, with a class name equal to space dash y

00:02:08 dash four to create some spacing, and will fade as well.

00:02:12 And within it, we can map over good lists dot map.

00:02:17 where we get different kinds of features, as well as the index for each one of these features.

00:02:22 Let me show you what those are.

00:02:24 These are coming from our constants, and we're talking about a list of some features that we offer, for example, hand-picked ingredients,

00:02:31 signature techniques, bartending artistry, and freshly muddled flavors.

00:02:37 So for each one of these, we'll render an li, a list item, that has a key equal to the index, as well as a class name equal to flex,

00:02:47 items-center and a gap of 2. And for each one of these, we'll render an image that'll have a source of images check.png with an alt tag of check.

00:03:01 And then we can render a p tag that'll render the actual feature.

00:03:06 So now we can see those four right here in the middle of the screen.

00:03:09 But now let's render the main star of the show, which is the cocktail image.

00:03:14 So I'll head below this UL, still within the content part, and I'll render another div that'll have a class name equal to cocktail-img.

00:03:26 And within it, I'll display an image.

00:03:29 that'll have a source of forward slash images, forward slash under img.jpg, an alt tag of cocktail, and a class name of abs center,

00:03:43 so absolute center, masked img, size dash full, and object dash contain.

00:03:51 So if we save it, you can see this little image appear right here.

00:03:55 But actually what's happening, if you take a look at the masked image class name that we're applying to it, you'll see that this is actually taking that

00:04:05 image and then positioning it nicely in the center and applying a mask.

00:04:10 So basically, we're applying a mask image.

00:04:13 And let me show you how that one looks like.

00:04:15 It is within public, images, and then we can search for mask image.

00:04:21 and you can see that it is just a single regular drink.

00:04:24 But then, we also have the regular image, the one that we used, which is the under image.

00:04:29 So let me show you how the under image looks like.

00:04:33 It's this one, the whole image.

00:04:35 But did you know that natively in CSS, you can take one image and then choose another image, such as this one, to be the mask?

00:04:42 And if you do that properly, if you say mask image, then it'll take the shape of that other image.

00:04:49 Pretty cool, right?

00:04:50 Now we can head below this div and create another UL.

00:04:54 This one will actually be exactly the same as this UL.

00:04:57 So I'll just copy it and paste it right here, space Y4.

00:05:02 But instead of good lists, we'll map over the feature lists, map over it, give it item center, but I'll also give it justify start.

00:05:12 and a gap of two, and to this p tag, I'll also give a class name, equal to, on medium devices, wfit, and typically w60.

00:05:23 So now on mobile, they look exactly the same, but if you expand it, you'll be able to see it on the right side.

00:05:29 And now let's also render the text below it.

00:05:32 So I'll head below this UL and below one more div.

00:05:36 And I'll render a div with a class name equal to masked content, or container, with an h2 that has a class name equal to willFade.

00:05:49 We'll target these later on using gsap to fade them.

00:05:53 And I'll say sip-worthy-perfection.

00:05:57 Below this h2, I'll render a div that'll have an id equal to masked content.

00:06:05 Beneath it, I'll render an H3.

00:06:07 And here we can just copy from the design, made with craft, poured with passion.

00:06:12 So I'll just paste that in this H3 right here.

00:06:15 And I also want to copy this text right here for the P tag.

00:06:20 right below the H3.

00:06:22 This isn't just a drink, it's a carefully crafted moment made just for you.

00:06:26 So you're turning everything into an experience.

00:06:30 So now if you head back, I mean, you can see this, but you cannot see the H3 and the P tag, because they have an ID of masked content.

00:06:38 So we'll only show them as the user scrolls through the site.

00:06:42 So now, let's bring this entire section to life.

00:06:46 As the user scrolls, we'll pin the section, fade out the initial content, scale and reveal the image mask, and finally fade in the closing message at the bottom.

00:07:00 All of this will be linked only to one thing, and that is the scroll of your mouse wheel.

00:07:06 So let's animate it right here at the top of this section by first figuring out if we're on mobile or not, because based on our width,

00:07:14 we might need to position our elements a bit differently.

00:07:17 For that, I'll use the use media query.

00:07:20 and set the max width to about 767 pixels, same as before.

00:07:29 If it's below that, we're going to consider it a mobile device.

00:07:32 Then we can use the use gsub hook, and right within it, we can define the start value of our animation.

00:07:39 So I'll say start is equal to, if we're on mobile, we're going to start it when the top of the component reaches the 20% of the viewport,

00:07:50 else we're going to start it on top, top.

00:07:53 So as soon as we reach it.

00:07:54 Once again, this required for me to play with it a bit to figure out the best values.

00:07:58 So now that I know, we can just type them here.

00:08:01 And now we want to focus on the timeline itself.

00:08:04 So I'll say const mask timeline is equal to GSAP, which we have to import at the top.

00:08:11 So right here.

00:08:13 say import gsap from gsap and then you can say gsap.timeline and we can craft a new timeline based on the scroll trigger where we'll trigger the entire

00:08:29 art section.

00:08:31 We'll start the animation once we reach the start point that we declared above and we'll end it once the bottom of the section reaches the center of the screen.

00:08:41 I'll apply a scrub animation right here, and I'll set the scrub to 1.5, which will be Smooth Scroll Control, which means that the animation progress will

00:08:52 follow the scroll, but with some delay.

00:08:55 And I'll also say Pin, and set it to True.

00:08:59 This will keep the art section fixed in place while scrolling through the animation.

00:09:05 That is very, very important.

00:09:06 So just say pin right here.

00:09:08 So now that we have defined the timeline, we actually have to declare the animations.

00:09:13 So still within the use gsubhook, I'll say mask timeline dot two.

00:09:20 Dot will fade, and we want to change them to opacity of 0, stagger in between the elements of 0.2, and we can use an ease of power 1 dot in out.

00:09:33 This is one of the most commonly used ones.

00:09:35 So this is for the willFade elements.

00:09:37 So if I head back and reload, as we scroll, you can see that all the elements will fade.

00:09:43 And then as you scroll up, they'll reappear.

00:09:46 So now that we have this .2 for the fading elements, we can also apply a .2 for the masked image, where we'll change the scale to 1.3 to make it bigger.

00:10:01 I'll change the mask position to be center.

00:10:05 I'll give it a mask size of 400% to make it bigger, duration of one second, and I'll leave the same ease of power1.in out.

00:10:19 So now if I save this and reload and scroll down, you can now see that the mask actually widens throughout the duration of one second and shows our barman.

00:10:30 And finally, we'll also want to show the mask content.

00:10:34 So say to dot hash masked content.

00:10:39 That'll have the opacity of one, duration of one, and an ease of power one and out.

00:10:46 So now, as you continue scrolling to the end, you'll be able to see this new H2 and a P tag appear at the bottom, finalizing the section.

00:10:54 Pretty cool, right?

00:10:55 And this opens up so many possibilities of having one image being hidden behind the mask of another, and then it expands and invites the user in.

00:11:06 This is such a powerful and effective section.

00:11:09 And on mobile, it'll look something like this, where it still makes a lot of sense.

00:11:14 Sure, we could go ahead and reposition some elements to appear a bit better, but even this right here is pretty amazing.

00:11:20 So let's go ahead and commit it by saying git add dot git commit dash m, implement the art section, and then git push.

00:11:34 allowing us to focus on our menu section next.

00:11:37 But so far, great job on implementing this masked scroll.

00:11:41 This has been great, and I'm super excited to finish it off with this one.