00:00:02 Let's focus on the most important part of this course, and that is adding the drink animation effect, which is actually just a video that is playing frame

00:00:11 by frame as the user scrolls through the page.

00:00:15 So in this lesson, I will demystify these complex animations and show you that oftentimes, they're basically just very smart ways of using videos or images.

00:00:26 And then the final effect ends up looking something like this.

00:00:30 So, let's go ahead and make it happen.

00:00:32 Back within our hero page, we want to render a full-screen video.

00:00:37 It'll be muted and inline so it behaves well on all browsers and devices.

00:00:43 So, I'll head below the section that has a class name of Noisy, that is this one right here, If I click it, notice how WebStorm automatically selects it

00:00:54 right here at the bottom.

00:00:55 And then just below it, I'll render a div that'll have a class name equal to video absolute, which means that we don't want it to interact with other elements

00:01:07 on the screen and an inset of zero.

00:01:10 Now, this video class name, if you search for it, you'll see that we have actually declared it within our index.css where we apply a full width,

00:01:21 we change the height on medium devices, and we just apply some additional properties such as object bottom and object cover in order to render that video well.

00:01:30 Next, right within this div, I'll render the self-closing video element with a source.

00:01:36 equal to forward slash videos, forward slash input dot mp4.

00:01:42 Why input mp4?

00:01:44 Well, because if you head over to public videos, you'll see that this is the video that we have.

00:01:49 I'll also make it muted so we don't play any sound.

00:01:52 You rarely want to play sounds in your web applications.

00:01:56 Sometimes there's good opportunities to do that but in most cases just leave them on mute.

00:02:01 I'll also say plays inline so we don't actually show an additional video-like element like the track bar where you can move through the video or increase

00:02:11 or decrease the volume.

00:02:12 We want to hide all of that.

00:02:14 And I'll say preload to auto because we want it to load automatically as the user opens up the page.

00:02:21 And of course, we want to be able to work with this video.

00:02:24 We want to do something to it.

00:02:26 So we have to attach a reference to it, which I'll call a video ref.

00:02:32 Then right at the top of our hero page, I'll say const videoRef is equal to useRef coming from react.

00:02:44 And while we're here, I also want to figure out if we're on a mobile device.

00:02:48 So say const is mobile, and I'll make that equal to use media query, which is this React responsive package we installed before.

00:02:57 And I want to give it a max width of about, let's do 767 pixels.

00:03:06 So if it's up to that, then it's going to be mobile, else it's going to be web.

00:03:11 Now we can head below the use gsub hook that we have already created, specifically below the gsub timeline where we have animated the right and left leaves.

00:03:22 And we want to figure out where the animation will start and end.

00:03:27 So for example, we can say something like const start value, and then we can say that it'll start at center 60%. And we can also say the end value will

00:03:39 be equal to something like bottom top.

00:03:43 Now, these values will be different for mobile devices because there is less space.

00:03:48 So right here, before assigning value, I'll first check whether isMobile is true.

00:03:54 And if it is, I'll give it a different value, such as top 50. And same thing for the other one.

00:04:02 I will say ifIsMobile.

00:04:04 In that case, I'll say 120% and then top right here for the second property.

00:04:09 So what do these values mean?

00:04:12 Well, top 50 means that when the top of the video, always remember that, right?

00:04:17 The first property is referring to the element we're animating.

00:04:22 So when the top of the video reaches, and then this is talking about the screen, okay?

00:04:27 So when the top of the video reaches 50% down the screen, the animation starts.

00:04:33 Similarly, when the center of the video reaches 60% down the screen, the animation starts, that is on desktop.

00:04:41 In this case, we have the percentage at the start.

00:04:43 So this means that when the top of the video goes 120% past the top of the screen, meaning far off the screen, we end the animation.

00:04:53 And bottom-top means that when the bottom of the video reaches the top of the screen, then the animation ends.

00:04:59 We dive much deeper into these values within our GSAP course.

00:05:03 but I think this is going to be good enough for now.

00:05:05 And now that we know the start and the end values, we want to animate the video.

00:05:10 You know how at the start I mentioned Juni, which is the smart coding agent that makes you a more efficient developer?

00:05:16 Well, I want to put it to the test right now.

00:05:19 so you can download it and follow along with me.

00:05:21 The link is down in the description.

00:05:23 I'll press Command-Shift-P and then search for Juni, which will open it right here on the right side.

00:05:28 And remember how at the start of the video I said that it's going to be very hard for AI to replicate some of these beautiful animations?

00:05:36 Well, that is entirely true if you don't know how to approach them.

00:05:40 But as I said, this entire animation is nothing more than animating a video on mouse scroll.

00:05:48 So if you know that, then you know that it's not some kind of magic.

00:05:51 You have demystified it, and therefore, you're able to turn it into something that you can easily develop.

00:05:58 And if you know how to approach it, then AI can also do it for you.

00:06:03 So let's try to write a task for Juni to do it for us.

00:06:06 I'll say, create a GSAP timeline that animates the video as the user scrolls through the page.

00:06:15 And I think this is good.

00:06:17 I mean, this is a very limited prompt.

00:06:19 It contains half a sentence, but let's see what Juni can do with that limited info.

00:06:24 It'll say sending LLM request.

00:06:26 So first, it created a plan and I want to go over that plan with you.

00:06:30 It says check if scroll trigger is properly imported, create a GSEP timeline that animates the video based on scroll, use the video ref,

00:06:38 use the start and end values, add appropriate animation properties, ensure that the animation works on both mobile and desktop,

00:06:47 add a check, and it's doing all of that in real time as you can see right here.

00:06:51 It's actually animating things and testing whether it works.

00:06:55 So we can see the changes right here in real time.

00:06:58 The animation code has been updated to use a new video timeline reference, ensuring proper handling of video loading and playback.

00:07:05 The video now plays when in view and the animation is updated based on the duration.

00:07:11 Successfully updated, ready to play whenever the user scrolls.

00:07:15 And that's it.

00:07:16 A GSEP timeline has been successfully created to animate a video as the user scrolls through the page, utilizing the video ref for targeting and responsive

00:07:25 behavior with the start value and end value.

00:07:28 The implementation is error-free and all tests pass, ensuring a seamless video experience.

00:07:33 Well, we'll see about that, but the actual code is here.

00:07:36 So now let's see whether it works.

00:07:37 If I head back and reload, you can see that the animation starts automatically.

00:07:42 It actually slows down a bit and that's it.

00:07:44 and then it replays.

00:07:46 Also, if I scroll down, you can also notice how the glass is getting smaller, and it's actually working incredibly well.

00:07:54 But it looks like it wasn't precise enough.

00:07:56 We wanted that parallax effect where we control the entire video flow.

00:08:00 I'm going to teach you how we can do that.

00:08:02 But hey, this might even be better.

00:08:05 This doesn't require a user to scroll, rather they can just take a look at this amazing animation right here.

00:08:10 Still, we want to tweak it just a tiny bit and allow this glass to flow onto the second section and then end the animation there solely based on scroll,

00:08:19 not on autoplay.

00:08:21 So Juni did an amazing job right here, but now from scratch we'll go over it together and I'll show you how we can make this animation work for our specific

00:08:30 use case.

00:08:30 In this case, we won't be triggering the hero section, rather we'll be triggering the video.

00:08:36 The start and end values are corresponding to the start and end values we have created right here.

00:08:41 And then scrub is turned on, which means that it'll make the video play on scroll.

00:08:46 We also want to allow something called a pin to be set to true.

00:08:51 This will keep the video stuck on the screen while you scroll.

00:08:54 So as you scroll, the video doesn't move.

00:08:56 It'll stay in place.

00:08:57 Next, instead of using these methods directly on the timeline or calling the dot from to, I will just remove all of these and also remove this update animation

00:09:09 when the video metadata is loaded.

00:09:10 Instead, I'll just say videoRef.current.onLoadedMetadata.

00:09:17 I'll create a callback function, and I'll have to properly end this part right here.

00:09:23 And within it, I'll say videoTimelineRef.to videoRef.current.

00:09:30 And we want to change the current time of the video to be equal to videoRef.current.duration.

00:09:39 So this way, we're updating the current time based on the video duration.

00:09:44 And alongside this, I also want to head over to the video and turn off the autoplay that we had here.

00:09:50 We also don't need the loop because we're going to move it with the animation up and down.

00:09:54 So now, if you head back over to your app, it won't play by default, but as you start scrolling, you'll notice that the glass moves down,

00:10:03 But wait, this is looking worse than what Juni did initially.

00:10:06 Oh, I think I know why that is.

00:10:08 Here, we have to actually create a new variable for the timeline, not refer to the timeline ref.

00:10:14 So I'll say const TL as in timeline, and then we'll use that TL right here when you say video timeline ref, just TL.2.

00:10:23 This will actually tie the current time with the duration.

00:10:26 So if you get back right now and reload the page and start scrolling, you'll see that the animation is being applied on scroll.

00:10:33 Perfect.

00:10:34 Now, if we compare this with what Juni initially did, well, to be honest, I cannot really tell which one is better.

00:10:41 This one actually plays it both on scroll, but then it also continues the animation later on.

00:10:48 So, once we actually finalize the second section, I think Juni's might actually be better.

00:10:52 So, Juni has passed the test.

00:10:54 But, just to stick with our design, I'm gonna bring us back to our final solution.

00:10:58 Now, you can notice that on my end, the animation feels very smooth.

00:11:02 On your end, it might feel a bit choppy, something like this.

00:11:07 And if you use your mouse to scroll, then it depends on how your mouse wheel is actually sending the signals to your computer.

00:11:14 If I use the touch bar on my MacBook, it is very smooth, but with the mouse scroll, it is a bit less smooth.

00:11:20 So that is the difference.

00:11:21 But again, why should we make it feel like it's skipping frames?

00:11:25 This is actually happening because most videos only have a keyframe every few seconds.

00:11:31 But for scrub-based animations, we need every single frame to be a keyframe.

00:11:36 And we can fix that using a free open source command line tool for processing video and audio files called FFmpeg.

00:11:45 So just head over to their website and download it.

00:11:48 Once you download and install it, we just have to run one single command.

00:11:52 And I'll actually link it somewhere below this lesson or within the video kit.

00:11:57 So you can just copy and paste it.

00:12:00 Or feel free to type it out by hand.

00:12:02 And if you're new to this, don't worry.

00:12:04 You don't have to learn this at all.

00:12:05 We just need one single command.

00:12:07 You don't have to know how to use this software.

00:12:10 Now, first of all, you'll have to run this command within where our video is contained.

00:12:14 So we'll have to cd into public.

00:12:17 and then once again, CD into videos.

00:12:20 Once you're there, you can copy it and run it.

00:12:23 In my case, it says that the output file already exists and asks me, do I want to override?

00:12:28 I'll say no, and you can say the same thing.

00:12:31 That's because I already provided this new output file for you, which has one frame attached to every single keyframe, so it makes the animation smoother.

00:12:40 So now we can head back over to our hero page.

00:12:44 Scroll down to where we have the video, and instead of displaying video's input, I'll display the output, .mp4.

00:12:53 So if you reload and try to test it, it'll be a bit smoother even with your mouse, but if you have a touch bar or on phones,

00:13:01 it'll feel even smoother, which means that the video is now fully optimized for the scroll trigger playback.

00:13:08 Now, why are we scrolling this glass into an abyss of nothingness?

00:13:12 That's not what we want our user to see.

00:13:15 Instead, we want to scroll it into the pricing of other cocktails that we offer, which is this section right here.

00:13:21 So, let's head back over into our homepage.

00:13:24 That is our app right here and delete this div, which for now just helped us to scroll.

00:13:30 But now in the next lesson, I'll show you how we can add the cocktail section.

00:13:35 So just remove this div.

00:13:36 Let's also commit it to GitHub.

00:13:38 First, you'll have to CD two times to get back to where our project is.

00:13:43 Then type git add dot to stage all the changes.

00:13:46 And git commit –m implement hero scroll animation.

00:13:54 And then git push to push it over to GitHub.

00:13:57 Perfect.