Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
SecondVideo
Loading...
Loading...
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 Now let's see what comes right after our GSEP developer.
00:00:06 Well, if you scroll down, we have one more video animation and then some similar slides.
00:00:11 But these slides will actually repeat one more time for our character that I think is way more important.
00:00:17 And I like how it continues naturally from our previous video.
00:00:22 Just check this out.
00:00:24 This is Jason, right?
00:00:25 We know about him.
00:00:26 But then, as we scroll, a new character is revealed, and that is Lucia Caminos.
00:00:33 And then we have a section that is very similar to Jason.
00:00:38 So what do you say that we go ahead and do it together?
00:00:41 And maybe I give you some challenges along the way, considering that you already implemented a section that is very similar to this one.
00:00:48 So let's introduce Lucia.
00:00:51 This section is similar to our first video.
00:00:55 So let's create a new section right here by creating a new file called SecondVideo.jsx.
00:01:04 Run RAFCE.
00:01:06 And let's import it right below JSON within our app.
00:01:12 It'll be second video.
00:01:14 And you can already assume that after the second video, there's going to be Lucia.
00:01:19 So I'll already write a comment for that.
00:01:21 Just so you notice just how similar those four sections are.
00:01:25 Okay, with that in mind, I would like you to start developing the UI of our video section.
00:01:32 It's this one right here.
00:01:33 Just a static full screen video.
00:01:36 Can you do that?
00:01:38 Can we do it by following along with what we have in the first video?
00:01:42 Ignore the animations for now, but just take a look at this section.
00:01:47 This is what we need right now.
00:01:49 Pause this video right now and try to implement the UI of the second video.
00:01:54 I'll give you three seconds to pause.
00:01:56 Three, two, one.
00:02:00 And now let me give you the solution.
00:02:02 We can actually start just by duplicating this section within this second video.
00:02:08 And we will have to also add the video ref.
00:02:12 So right at the top, you can say const videoRef is equal to useRef.
00:02:18 And of course, this is coming from React, so we can import useRef directly from React.
00:02:26 Okay, so which changes do we have to make?
00:02:29 It's not going to be the same exact video one more time, right?
00:02:32 Well, of course not.
00:02:34 I'll give this section a class name of Lucia, and I'll keep this div's class name to HDVH, which is basically just full height.
00:02:43 will pass its own video ref, muted, plays in line, auto, and if you looked into the assets, then you could have found a second video that says output to,
00:02:56 which is exactly what we want to use.
00:02:58 Within class names, I'll give it a size-full, object-cover, as well as a second VD, as in second video.
00:03:09 We'll use this class name to target it using GSAP.
00:03:12 Oh, and for this one, I want to do something just a tiny bit differently, and that is to add the inline styles of object position which will be set to 30%
00:03:25 and then 0%. What it does is it'll center the most important focal point of the video.
00:03:32 We want to focus on the characters, and by changing the position, we can directly target it.
00:03:37 And now for the animation.
00:03:39 Instead of making you do it, I want to do it with you one more time, just so we recap everything we've learned.
00:03:45 So, I will first import G-SAP, coming from G-SAP, as well as import the use gsab hook coming from gsab react.
00:03:56 Then I'll initialize that use gsab hook right here.
00:04:01 And within it, we first have to prepare this Lucia section to be able to use it.
00:04:07 So I'll say gsab.set.lucia and I'll set the margin top to minus 60 VH.
00:04:18 We're doing this to shift the whole section up and make it invisible initially by giving it the opacity of zero.
00:04:27 Next, we want to create a scroll pinned timeline, similar to what we did for JSON.
00:04:33 I'll say const TL is equal to GSAP.
00:04:38 dot timeline, and of course it'll be managed by the scroll trigger, and will trigger the component called dot lucia, starting the animation when the top
00:04:50 of lucia enters the top of the viewport, and will end it when the bottom of the lucia section reaches the top of the viewport.
00:05:01 I'll also set the smooth scrolling of scrub to 2, and I'll pin the video, which will keep the video fixed during scrolling.
00:05:10 So now that we have the timeline, we are ready to animate the video's playback using scroll, once the video fully loads,
00:05:18 of course.
00:05:19 So to do that, we can use the videoRef.current.onLoadedMetadata to be able to figure out whether the video had loaded, And if it did,
00:05:31 we can say tl.to videoRef.current, and then we can simply set the current time to videoRef.current.duration, which means that we'll play the full video
00:05:44 by scrubbing throughout a duration of three seconds with an ease of, you know it, power1.inout.
00:05:54 And I'll also make it play along the previous animation, not after it.
00:06:00 And just before we test it out, let's not forget to fade in the video.
00:06:07 By saying tl.2.lucia, we'll simply set the opacity to 1 throughout the duration of 1 second with an ease of power1.inout.
00:06:21 Now, if you reload and start scrolling down, you'll start seeing this Lucia section appear right here.
00:06:28 And notice how Lucia is not in the middle.
00:06:31 Well, that's because it actually looks good on desktop devices.
00:06:36 She is right here.
00:06:38 But as you decrease the size of it, for example, to very small mobile, and as you scroll down, she's not going to be in the middle anymore.
00:06:46 And that is exactly why we use this object position.
00:06:50 If I remove it completely, you'll notice that you'll just be able to see this boardwalk right here.
00:06:56 but we might need to tweak it a bit more depending on the device size.
00:07:01 For example, for this mobile, I think 20 works out a bit better, or maybe something like 15 even.
00:07:07 So now we can see that on mobile, she nicely jumps in.
00:07:11 We just have to make sure that we haven't messed it up on desktop.
00:07:15 So if we scroll down, notice how Jason comes in, and immediately after Jason, we animate Lucia and it looks great.
00:07:23 And it keeps looking great on mobile as well.
00:07:26 So that is how you use the object position.
00:07:29 Perfect.
00:07:30 This section was a replica of Jason, and I guess that's why they're so close.
00:07:35 So let's go ahead and commit this second video by saying implement, second video, commit and sync.
00:07:44 And in the next section, we'll also give Lucy some more details about her life the same way as we did with Jason.
00:07:52 So we're just crafting the story right here.
00:07:54 It's all about that emotional experience that users feel when they browse your site.
00:08:00 So let's do that next.
