
Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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
, symbol
Objects
, Arrays
, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 And welcome to the last lesson in building your GTA 6 landing page.
00:00:07 We've implemented the postcard, made it animate on scroll, and now we have this video which we want to animate into a section that is already familiar
00:00:16 to us.
00:00:16 And that is the coming soon section that we're going to end this whole page with.
00:00:21 That is the main, well, not call to action, but it's the main message we want to get across.
00:00:28 This game that you've just seen the characters for will arrive on May 26th.
00:00:33 So let's implement it by creating one more section, which I'll call outro.jsx, and I'll run RAFCE.
00:00:43 I'll just add it at the bottom of the app, right below the final, and we can first implement the UI.
00:00:50 If you think about it, the UI will be very similar to that of the coming soon section.
00:00:56 It'll have a section with a class name, a div, and then it'll say when it is coming.
00:01:01 So let's actually copy this entire section and paste it over here in the outro.
00:01:06 Even though most of it will be the same, there will be some differences.
00:01:11 For example, I'll change the class name to final message.
00:01:16 Give this logo a class name of on medium devices, W72 and typically W52.
00:01:23 So we can remove this class name with the entrance logo.
00:01:26 In this case, we don't have to give it a class name of text wrapper, but we'll keep the gradient.
00:01:31 We have the flex center and some logos.
00:01:34 Now, a task for you would be to just make this work with the coming soon component so that we don't even have to duplicate this little piece of JSX.
00:01:43 But to separate it as a section and to give it its own animations, I decided to turn it into a new component.
00:01:48 And now for one last time in this course, at least when it comes to the GTA landing page, let's implement these animations together.
00:01:56 I'll first use the use gsab hook right here and create a callback function within it.
00:02:01 Then I'll set the initial values for the outro section by saying gsab.set.finalMessage.
00:02:10 And I simply want to set the margin top to minus 100 VH.
00:02:16 So it comes from the top and the opacity to zero.
00:02:19 And let's not forget to import GSAP from GSAP.
00:02:23 Then we'll create a scroll tied timeline for the outro reveal.
00:02:28 We can do it by saying const TL as in timeline is equal to GSAP.timeline.
00:02:35 based off of the scroll trigger.
00:02:37 And specifically, we want to trigger the final message, and we want to start it when the top of the final message reaches about 30% from the top of the viewport.
00:02:49 And we want to end it when its top reaches the 10% of the screen.
00:02:54 Now, you might be wondering, how am I getting these percentages or where am I getting them from?
00:03:00 Well, it comes down to a lot of trial and error.
00:03:02 You can try it with some different values and see how the animation feels and then tweak it depending on what you need.
00:03:08 I'll also add scrub to sync the scrolls smoothly.
00:03:12 Now that we have the timeline, we can apply different animations to it, such as tl.to.finalContent, set the opacity to zero,
00:03:23 set the duration to one, and set the ease to power one dot and out.
00:03:30 So we fade out the video section above it, and then we will fade in the final message by saying tl.to.finalMessage, I'll give it the opacity of 1 to show
00:03:44 it throughout a duration of 1 second with an ease of power 1 dot in out.
00:03:50 And we don't need to play it with the previous animation.
00:03:52 So now the effect that this will have is as follows.
00:03:57 As soon as they close the trunk.
00:04:01 We start fading out and then start showing the coming soon.
00:04:07 So if you don't do it comically slow, like I was, if you do it normally, it's going to seem like they closed the trunk and then within it,
00:04:14 you were able to see this glowing text.
00:04:17 Pretty cool animation, right?
00:04:19 It's all about being purposeful with how you animate.
00:04:23 And you can see that these last few sections took us a couple of minutes per lesson.
00:04:27 It was super quick because a lot of the animation stuff is repetitive, but you just got to have the right assets and have a great idea of what you want
00:04:36 to do.
00:04:37 You could say that, hey, I need to have these great high quality assets to be able to animate some stuff, which isn't false.
00:04:46 But I also want to give you another alternative.
00:04:49 Think of those indie games or very low budget movies.
00:04:53 They don't have the budgets for great cameras, animations, and visual effects, but what they need to have instead is creativity.
00:05:02 Because oftentimes these low-budget games and movies, and websites for that matter, end up having that special effect that makes the users feel something
00:05:12 because they had to be very ingenious with how they approach creating it due to the limited budgets.
00:05:18 So with that in mind, now that the entire website is complete, just before we check it out for one final time, let's not forget to modify our favicon and
00:05:27 the title.
00:05:28 That matters a lot when deploying it, so it doesn't just say Vite plus React.
00:05:32 So I'll do it in this commit by heading over into index.html and I'll say GTA 6. Then you can also change the icon by heading over into the dot slash public
00:05:48 forward slash images, forward slash logo.webp.
00:05:54 If you do this and come back, you'll see that now it says GTA 6 by JSM, and there's a little GTA logo.
00:06:02 And now we can deploy to the web so that you can put it in your portfolio and share it with your friends and potential employers so they can see what you're
00:06:11 capable of.
00:06:11 For that, I'll use Versel as it's the easiest way to get the website deployed.
00:06:16 So just head over to versel.com and click start deploying.
00:06:21 Then log in or create your account.
00:06:24 You can proceed with GitHub.
00:06:25 And just before you deploy it, don't forget to push the latest changes.
00:06:28 I will say, implement outro, commit and sync.
00:06:35 And then if you head over here and click add new project.
00:06:39 It should be right here at the top, updated just now.
00:06:42 So import it.
00:06:45 It'll automatically recognize that it is a Veed project and you can just click deploy.
00:06:50 The deployment will start and this process should take about a minute.
00:06:54 So I'll give it some time and I'll be right back.
00:06:57 And there we go.
00:06:58 It was actually faster than I thought.
00:07:00 The project got deployed, so you can click on it and it'll open it up right here.
00:07:06 You can still see that all of the animations are working as smoothly as they did on your local variant.
00:07:13 So we can see when it is coming.
00:07:15 And by the way, if you were seeing some pixelation, that's because of my recording software, not on the website.
00:07:21 The final website looks amazing.
00:07:25 So I'll keep scrolling right here and explore the website one final time.
00:07:32 There we go.
00:07:33 We see our GCEP developer.
00:07:36 And then here's our graphic designer, Lucia.
00:07:41 After we scroll down, we should be able to see where they live.
00:07:45 It's the postcard from Leonida Keys.
00:07:48 And finally, they're going to close the trunk and say when the game is coming.
00:07:53 And now you can take this URL and share it with your friends or just link it to your portfolio.
00:07:59 Oh, and don't forget to share it on Twitter and LinkedIn as well.
00:08:02 People will love to see it.
00:08:04 And from my side, if you shared the word about the course, if you really liked it, it would really mean a lot.
00:08:10 So congrats on coming to the end of this phenomenal build.
00:08:15 This application was truly a pleasure to build.
00:08:18 It is a one of a kind, unique project, and I hope that you enjoyed building it with me.
00:08:24 With that in mind, the only thing left for us to do right now is to wait for the release of the game.
00:08:29 Thank you so much, I hope you enjoyed it, and do share your thoughts in the comments down below.
00:08:34 I'll see you in the next one, and have a wonderful day.