00:00:02 To get started with our cocktail section, let's head over into our components folder and create a new file called cocktails.jsx.

00:00:12 Run RAFCE to quickly spin it up, and then let's import it right below our hero within our app.jsx.

00:00:20 So that is cocktails.

00:00:22 Perfect.

00:00:23 This is how our current animation looks like on mobile.

00:00:26 We'll definitely improve it as we go, especially this extra light scroll bar, which we don't really need right here at the top.

00:00:32 But for now, let's focus on the cocktail section.

00:00:36 So just scroll down, head over into it, and let's start implementing it by turning this div into a section and giving it an ID that we can scroll to.

00:00:45 So we'll say cocktails.

00:00:48 And a class name of Noisy as well, because we want to match it with the top section.

00:00:55 Next, right within it, let's also render an image with a source equal to forward slash images, forward slash cocktail left leaf dot PNG.

00:01:08 with an alt tag of left leaf and an ID of C, as in cocktails, left leaf.

00:01:16 That'll look something like this.

00:01:19 Then, just below it, I want to duplicate it and create one for the right leaf.

00:01:24 I'll call it R leaf and C right leaf.

00:01:30 As you do that, you won't see any changes.

00:01:32 There's still gonna be only the two leaves that we implemented before, but none on the cocktail section.

00:01:38 That's because we haven't yet properly animated them and put them where they need to be on the screen.

00:01:42 But for now, let's focus on the list of the cocktails.

00:01:45 So I'll head below this image and render a div with a class name equal to list.

00:01:53 And within it, I'll render another div with a class name equal to popular.

00:01:58 Within it, I'll render an H2 that'll say most popular cocktails.

00:02:04 And then below it, I'll render the UL where we can map over those cocktails.

00:02:11 So within this UL, map over cocktailLists.map.

00:02:16 And this cocktail list is coming from our constants where we have all the most popular drinks.

00:02:22 So I'll map over each drink.

00:02:24 And for each one, I will automatically return an li, which is a list item, with a key of drink.name.

00:02:33 And then within it, I'll render a div with a class name on medium devices, margin E, which is inline end of 28. When you want to position something in

00:02:46 the ends of the screen, I found this property to position it very well.

00:02:49 Then we want to render an H3 that will render the dynamic drink name.

00:02:56 And the p tag, which will render the drink.country, so where is it from, and drink.detail.

00:03:04 So some more details about the drink.

00:03:07 Finally, below the div, I'll render a span with a dash or a line, and then I can render the price.

00:03:15 I'm noticing that we're mentioning drink one too many times, so we can just destructure everything from the drink, such as the name,

00:03:22 country, detail, and price.

00:03:26 And now you don't have to mention it multiple times, you can just say what you want to get from it.

00:03:32 If you do that and save, you'll see that now it looks something like this.

00:03:36 For example, we have Chapelle Hill Shiraz, which is about 10 bucks.

00:03:41 Not sure what this one is.

00:03:42 Oh, it's a bottle.

00:03:43 Okay.

00:03:43 But even though it's a bottle, it's still very expensive.

00:03:46 For that kind of money, maybe it would be better to just head over to jsmaster.com and get yourself a monthly subscription instead of spending money on cocktails.

00:03:53 But hey, to each their own.

00:03:55 And here I will end this div of popular.

00:03:57 But what we can do now is just duplicate this entire div.

00:04:01 And for this one, I'll call it loved.

00:04:04 And I'll say most loved.

00:04:06 Mocktails are like cocktails but without any alcohol in them.

00:04:10 So basically like sodas.

00:04:11 And I'll map over the mocktails lists.

00:04:16 I'll also extract all of the properties.

00:04:18 And I'll always make it just ME28.

00:04:21 No need to do it only on medium devices.

00:04:23 And now you're going to end up with something that looks like this.

00:04:25 Now, of course, this looks so much better on larger devices.

00:04:28 So if I head over to tablet, you can see that now we can actually see the menus appearing on top left and top right of the end of the animation.

00:04:36 And the leaves are right here at the bottom left and bottom right, but they're not being rendered properly.

00:04:42 That's because I misspelled the cocktail right here.

00:04:45 So if I spell it properly, you should be able to see two huge leaves appear at the bottom left and bottom right.

00:04:52 But as we applied a little animation to those two so that they appear like a parallax moving up and down, we can also apply a little animation to those

00:05:01 two at the bottom.

00:05:02 So let's actually do that to recap our understanding of G-SAP.

00:05:06 See, in React or Next.js applications, you can use gsab through the helper libraries.

00:05:13 For example, a library that exposes a use gsab hook called add gsab react.

00:05:20 Still, you also need to import the original gsab library from gsab.

00:05:25 but the GSAP hook makes it easier to use.

00:05:29 So you just say use GSAP, you declare a callback function, and you close it right here.

00:05:34 Within it, you can start defining your timeline, which you can then move up and down.

00:05:39 So say const parallax timeline is equal to GSAP.timeline, where you can define the type of trigger for that application.

00:05:50 In this case, I'll say it's a scroll trigger where we will trigger the cocktails section.

00:05:58 So here, we want to say that we want to start once the top of the section reaches about 30% of the viewport or of the screen.

00:06:09 Similarly, we want to end the animation when the bottom of the cocktails screen or hash cocktails, reaches about 80% down the screen,

00:06:21 and we can turn on the scrub to be true, which means that we want to animate it on scroll.

00:06:26 The timeline just defines when the animation will happen, but we haven't yet said what will happen with those leaves.

00:06:32 And by the way, if you're wondering how I came up with 30 or 80 or top or bottom, it was just a bit of trial and error.

00:06:39 You have to play around with it and see what works.

00:06:42 So now that we have this timeline, I'll say parallax timeline dot from.

00:06:47 So we move it from what specific class name?

00:06:51 From C left leaf.

00:06:55 And we want to give it X is minus 100 and Y is 100. So we move it to the left on the X axis and 100 pixels up on the Y axis.

00:07:07 And we also want to apply another dot from this time for the C right leaf and X is going to be 100 and Y will be 100. so they're gonna move in the opposite directions.

00:07:19 Basically, we're targeting those IDs that we have given them right here.

00:07:24 So now, if you scroll down, and if you scroll very slowly, notice how this one on the left comes up first, and then the one on the right also comes up.

00:07:33 So it's like you're moving your cocktail into a jungle.

00:07:36 And that's it for this parallax scroll on the leaves.

00:07:39 These subtle movements like this make the page feel more alive without it being too distracting.

00:07:45 So let's check it out one more time on desktop.

00:07:48 We can see all of the nice animations, particularly the one where we animate each letter of the word mojito.

00:07:55 And then as we scroll down, the ice falls into the glass and we can see more cocktails that we can order.

00:08:01 And then the bottom leaves appear, greeting us into the jungle.

00:08:05 So amazing job on finalizing two super exciting sections of the Cocktails website.

00:08:11 Let's not forget to commit it.

00:08:13 So I'll head over here and say git add dot git commit dash M implement Cocktails section.

00:08:24 And push it.

00:08:26 And if you want to quickly deploy it, head over to versell.com and add a new project.

00:08:32 You'll see that GSAP Cocktails has had some changes.

00:08:35 So you can just click import.

00:08:38 It'll automatically recognize that it is a new Veed project or whatever other framework or library you used.

00:08:44 You can also choose your project name right here, and you can just click deploy.

00:08:48 Now it'll take a couple of minutes for the project to be deployed and then you'll be able to check it on the internet and share it with your friends or

00:08:56 put it on your portfolio.

00:08:57 Check out these animations on top.

00:09:00 You were able to see some light if you were fast enough to spot it and it looks like our project got successfully deployed.

00:09:07 So, click on it right here.

00:09:09 In my case, it's live on this URL.

00:09:12 For you, it's gonna be something different.

00:09:14 But what matters most is that now we can copy that URL and share it with your friends and potential employers, or just put it in your portfolio.

00:09:22 Okay, so now that we're here, let's see if it still works exactly like it did locally.

00:09:27 If I scroll down, the ice still falls into the glass.

00:09:31 and we can see the prices, and we're in the jungle.

00:09:34 This works great.

00:09:35 On mobile, it looks like this.

00:09:37 The text is still fully readable.

00:09:39 You can quickly scroll to it by clicking here, and we do have some extra space right here, but as soon as you start scrolling,

00:09:45 that space is filled with these leaves, and then we can see the cocktails.