00:00:02 Okay, let's meet JSON by implementing this video transition into a gallery section.

00:00:10 We can start by creating a new section right here within the sections folder, and I'll call it just JSON dot JSX.

00:00:19 I'll run RAFCE, remove this import, and then just import it within the app dot JSX by saying JSON.

00:00:28 Not JSON as in JavaScript object notation.

00:00:31 but Jason, our main character.

00:00:33 So, let's head over into it, and let's start implementing the base structure and the layout of this section so that we can later on animate it.

00:00:42 I think you can already start seeing some patterns.

00:00:45 You cannot animate stuff as you create them.

00:00:48 You first have to create them statically, decide which animations you want to add, and then just implement them.

00:00:53 So, let's turn this into a new section.

00:00:56 with a class name equal to JSON.

00:01:00 What this one does is it sets the Z index to 10 to make it appear over other elements.

00:01:06 On large devices, it sets the padding inline to about 160 pixels, so we have some breathing room, and it modifies that padding for different screen sizes.

00:01:17 It attaches a bit of padding Y, meaning top and bottom, so it can breathe, and some margin top as well.

00:01:24 And then we utilize the flex layout.

00:01:26 On large devices, it is a row because we have more space.

00:01:31 And on smaller devices, it is a column.

00:01:33 We apply a bit of a gap in between the elements and just make it take the full width.

00:01:39 Then let's create a new div right within it.

00:01:42 and give it a class name of max-w-lg.

00:01:47 This is going to take about 512 pixels.

00:01:50 And we can also give it json-content class name.

00:01:56 What this class name does is it applies a bit of a radial gradient.

00:02:00 We have done something like that before.

00:02:02 Basically sets it a bit in the background to make the other things on the screen shine.

00:02:07 In other words, it just creates a soft oval-shaped glow.

00:02:11 It'll be dark in the center and then it'll fade to transparency to about 70% and outside of that, it'll be fully transparent.

00:02:20 This is used to make a spotlight or a focus effect behind something.

00:02:25 And behind what exactly?

00:02:27 Well, the content.

00:02:29 So right here, I'll add an H1 where I'll say something like Jason Duvall.

00:02:35 So now you can see this text right here.

00:02:38 I'll head back over to the final application just so I can copy some stuff from here.

00:02:42 So I'll copy this part and paste it as the H2, basically saying what Jason wants.

00:02:50 And then finally, we have this P tag just below it where we give more info on Jason and explain why his life is just getting harder.

00:02:58 So if we go back, it'll look something like this.

00:03:01 Then let's render the main image inside of that content block.

00:03:06 Right within the p tag, I will also render a div that'll have a class name equal to json-2.

00:03:16 Within it, an image that'll have a source equal to forward slash images, forward slash json-2.webp.

00:03:28 And now we can show this image, but of course, let's make sure to properly point to its path.

00:03:35 And it'll look something like this.

00:03:37 It also has this nice hover effect.

00:03:39 It is cut a bit on mobile, but that is completely fine.

00:03:42 I think you can still get the point across.

00:03:44 Then we can head one and two divs down and create another div for the parallax section.

00:03:51 I'm referring to this section where we have those two additional images in this kind of a layout.

00:03:56 So I'll give it a class name equal to space dash y dash five margin top of 96 to divide it a bit from the other elements and IMG box.

00:04:09 And we'll use this IMG box later on to target it using GSAP.

00:04:15 Within it, I'll display another div and it'll have a class name equal to JSON1, within which I'll display an image that'll be equal to source,

00:04:26 forward slash images, forward slash JSON1.webp.

00:04:31 And I will just duplicate this div and the image below, and I will render JSON3 right here, which is going to be the third image.

00:04:42 So if you do it like this and scroll down, you'll now see those two different images here as well.

00:04:49 Of course, where this really shines is on desktop.

00:04:52 So as you scroll down, we can see the video about Jason start animating.

00:04:56 And then as we scroll down, you can start learning a bit more about Jason and his hard life.

00:05:04 Perfect.

00:05:05 Now let's bring it to life.

00:05:07 You already know the drill.

00:05:08 We'll just bring in GSAP by importing GSAP from GSAP, as well as importing the use GSAP hook coming from at GSAP react.

00:05:21 Then within the section, I will use the use gsab hook and just create a new callback function within it.

00:05:28 And we want to start by setting the initial layout position.

00:05:33 The JSON section will start higher up in the scroll space to create an overlap reveal with the previous section.

00:05:41 So let's simply say gsab.set.

00:05:44 We're targeting the .json class name and we'll give it a margin top.

00:05:50 of minus 80 view height.

00:05:54 You use minus when you wanna bring it up.

00:05:56 So check this out.

00:05:58 Now, similarly to the final application, this JSON text and everything is appearing over the video, which might seem a bit weird and counterintuitive,

00:06:08 but if you think about it, it makes sense visually and also nicely connects the video to the introduction of the character.

00:06:14 Next, let's create a timeline that will fade out the previous section.

00:06:20 So the first video, by saying gsap.timeline, I'll define the scroll trigger and I'll specify the trigger as the .json component.

00:06:32 And we want to start the scroll trigger when the top of the JSON component reaches about 90% of the viewport.

00:06:40 And we want to end it near the middle.

00:06:42 So I'll say top percent of the component.

00:06:45 reaches the center of the screen, and we'll set the Scrub property to 2, which will make the animation follow the scroll position,

00:06:54 but it'll be delayed by 2 seconds.

00:06:56 Think of it like a smooth catch-up.

00:06:59 Scroll moves, and animation reacts gradually.

00:07:02 This makes the video feel smooth and natural, and not snappy.

00:07:06 And yeah, it goes with that cinematic look that we're after.

00:07:10 So now, we can attach a dot 2 to this G-Sub timeline, And specifically, what we want to do is we want to animate the dot first VD to opacity of zero throughout

00:07:26 a duration of one second with the ease of power one dot in out.

00:07:31 So now if you reload and start scrolling down, you can see that the video fades out.

00:07:37 You might need to reload your screen if this hasn't yet been applied.

00:07:41 And then it fades out and makes space for this section.

00:07:45 How cool is that?

00:07:46 And now, let's create a parallax animation for the other images that we want to stack.

00:07:52 So, right below this, I'll say gsap.to.json.

00:07:57 and .img box will also apply a scroll trigger and we'll start the trigger when the .jsonComponent and we'll start this animation when the top of the JSON

00:08:13 component reaches the center of the viewport.

00:08:15 And we'll end it towards the bottom.

00:08:17 So I'll say when the 80% of the JSON component reaches the center of the screen.

00:08:23 I'll also set the scrub to two to stay consistent.

00:08:27 So now, right after the scroll trigger, by adding a comma, you can now define which variables you want to change.

00:08:34 So we can set the Y to minus 300 throughout a duration of one second, with an ease of power1.inout, and we'll make it start alongside the previous animation,

00:08:47 by using this character right here.

00:08:49 So it'll happen along the fade of the video, not after it.

00:08:54 So now if I reload, start scrolling down, the video fades in, it starts fading out, JSON text appears, and then you can see that these images start flowing

00:09:07 in as well.

00:09:08 It visually looks good on mobile.

00:09:10 But where it really starts making sense is on desktop or tablet devices, where it looks something like this.

00:09:18 You can see Jason coming up and then it fades out and then you can start seeing more about his life and see how these two images on the right kind of scroll

00:09:29 alongside this image on the left right here.

00:09:31 Pretty cool.

00:09:32 That one stays at the same position, but those two move up and down and notice how they have a two second delay.

00:09:40 So if I very quickly scroll down, notice how it takes them about two seconds for that to happen.

00:09:47 If I go ahead and change the scrub to about maybe 10, check this out.

00:09:52 I'll reload it.

00:09:54 I'll scroll quickly up and notice how slowly they move down.

00:09:58 Check it out one more time.

00:10:00 One, two, three, four, and then they very slowly start to pause because of the easing we are using.

00:10:09 And you've already learned about all of these different kinds of easings that we have.

00:10:13 So I'll bring it back to two seconds because this feels very cinematic.

00:10:17 As I scroll up and down, it feels like the images are following me.

00:10:21 Okay, now that we've implemented this section, let's have some fun.

00:10:25 Jason Duvall.

00:10:27 Once an easy life, but things just keep getting harder.

00:10:31 Jason grew up around grifters and crooks.

00:10:34 After a stint in the army trying to shake off his troubled teens, he found himself in the Keys, doing what he knows best.

00:10:41 Working for local drug runners.

00:10:45 it might be a time to try something new.

00:10:48 Well, looking at Jason right here, it seems like he just might learn GSAP next.

00:10:55 It really might change his life around.

00:10:58 So with that in mind, congrats on completing yet another section of this beautifully animated and very emotional and practical GTA landing page.

00:11:08 So before we continue to the next one, let's not forget to commit our changes by heading over to our source control and saying,

00:11:16 implement JSON.

00:11:18 Commit and sync.

00:11:20 Wonderful.