0:03 What I want to show you today is I want
0:05 to show you how to design this amazing
0:08 drawer section where users can just open
0:12 this large drawer and uh notice when I
0:14 hover inside a particular name we have
0:18 the the color changing. We also have the
0:20 image on the left as you can see and
0:22 then it pans from right to left and this
0:26 happens across the board. So I can also
0:29 click here places and what you see is
0:32 these very nice transitions and
0:35 interactions on I hover and it also
0:38 happens on the trailer part and the
0:40 downloads and especially here we have
0:44 this nice over effect and also I can
0:47 scroll and interact with the website.
0:50 So, I think this is a very interesting
0:53 beat and if you're a designer and you
0:55 want to learn about Framer or you're
0:57 just interested about picking up a new
0:59 skill, I'm going to show you how to
1:02 design this amazing navigation section
1:05 and uh without writing a single line of
1:09 code. So, let's get this
1:13 started. Yes, my name is Joe and this is
1:27 So here I have my frame workspace and um
1:29 I have pretty much some work that I've
1:33 already done and just to be clear I did
1:36 it because so that it's much easier for
1:38 us to pick up on the most important
1:42 parts. So inside here I have my hero
1:44 image container and this hero image
1:48 container this is where I have Lucia and
1:51 JSON and Lucia and JSON is the picture
1:53 you can see and I have this play play
1:57 icon here and then I also have so inside
1:59 the desktop I have two layers which is
2:02 this menu and this hero image container
2:04 that I've just told you about. So the
2:06 menu is where we're going to do all the
2:08 work and this is where we're going to
2:11 manipulate so that we can have this uh
2:15 drawer effect. So
2:17 um inside this menu I just have my logo
2:19 on the left and the hamburger icon on
2:22 the right. And to build this hamburger
2:24 icon, it's generally you just need to
2:27 have two frames and uh you can stack
2:29 them on top of each other. And then this
2:32 hamburger icon has a no round padding of
2:37 currently mine has around 20 padding. So
2:39 that's pretty much it. And then notice
2:42 also that the menu is set to space
2:45 between and it has a padding of right of
2:54 I'm going to come to my menu and I'm
2:58 going to hold Ctrl Alt K. So hold Ctrl
3:01 Alt K on your menu. And what happens is
3:05 you get this popup uh pop-up card and it
3:06 tells you we want to create a new
3:09 component and I'm going to make I'm
3:11 going to just name it menu and I'm going
3:14 to create it. The critical part here is
3:16 I want us to you might ask why are we
3:18 creating this variant is because I want
3:21 you to come to this hamburger icon and
3:23 you can see here there's on this right
3:25 panel there's something called
3:28 interactions. So remember we want to
3:31 have this hamburger menu once we click
3:33 it there's a form of interaction that
3:35 happens. So I'm going to click this plus
3:38 icon just to add an interaction. And you
3:40 can see we have a transition and we have
3:42 a new event. So here we're going to
3:46 click new event. So then on this so I'm
3:49 going to name my event and I want this
3:54 to open just call it open overlay.
3:58 So so generally what I want is when I
4:00 click this you're going to trigger an
4:02 event called open overlay. And as you
4:05 can see here we have a click next to it.
4:08 So and that's pretty much it. And uh now
4:10 we have a menu. As you can see, it's
4:13 changed from normal layer to a
4:16 component. And so now what I'm going to
4:19 do is I'm going to go to this menu. And
4:22 uh I'm going to come here on my right
4:24 side and I'm going to click this
4:26 overlays. So I'm going to click an
4:28 overlay. And then I'm going to click the
4:31 fixed overlay, not the relative, because
4:34 we want to have an overlay that takes
4:38 the whole space of our our page. So if I
4:40 click the fixed, what you see, we have a
4:43 blue border all around this website and
4:46 uh it takes the height of 100 VH. So
4:50 this is exactly what we want. Uh so this
4:51 is the settings of the overlay. So
4:54 anything you want to change or tweak in
4:57 the overlay, how it uh what is a
5:00 trigger, what is a preset, what are the
5:02 color of the overlay, is it dismissible
5:05 or not, enter, exit C index, everything
5:08 is here. And so the first thing I want
5:10 to show you is I want to show you
5:12 remember we had created an event called
5:14 open overlay and that is why it's
5:16 appeared here. But in case we have a
5:19 click event
5:22 uh which is not what we want. Um let me
5:24 just show you what will happen so that
5:26 you can compare between the click and
5:27 the open overlay and so that you can
5:30 have a a good idea on what we mean. And
5:32 then another critical bit is I want you
5:35 to look at this zindex property and I
5:37 want you to make sure that the index
5:41 property has one. So now what we mean is
5:44 as you can see when we put one it has
5:47 this back black color and this is
5:49 actually the color that we have on our
5:51 overlay. As you can see now we can see
5:55 as we make changes. So remember we have
5:58 this currently show on click and I want
6:00 to show you. So since we have the menu
6:02 here. So if I click anywhere in the
6:05 menu, you can see the overlay comes. But
6:08 we want specifically to click this one
6:10 and not the whole menu. And that is why
6:13 we need to go back to the overlay and we
6:15 need to click make sure this is open
6:17 overlay. And then the preset. Let's just
6:20 do um we can add a small preset which
6:24 means that how do we want the overlay to
6:27 appear? We can maybe let it fade in or
6:30 fade in out or fade out. So I want it to
6:34 fade in just to give it a small uh effect.
6:35 effect.
6:38 So now if I view my website you can see
6:42 I click anywhere on the uh on the menu
6:43 nothing happens. But now when I click
6:46 this specific part we can see we have
6:50 this nice fading overlay. So that is the
6:53 most uh that is the first step. The
6:56 second step is now we need now to add
6:59 our layers. We need to add our text. We
7:02 need to add our images inside this
7:06 overlay because now so I can just start
7:08 by holding F on my keyboard and I can
7:10 draw anything. You know this is where
7:12 you can just draw anything you
7:16 want. And uh notice that it goes
7:18 underneath the overlay. This is means
7:21 this means that the frame is the child
7:24 of this overlay and um I can manipulate
7:28 it the way I want it to be and
7:30 uh and this is how it is. So when I
7:32 click this, we have this nice overlay.
7:35 So this is what we want to do. But now
7:37 instead of having this oval shape, we
7:41 want to have our menu pop up. So I'm
7:43 just going to get rid of this frame for
7:47 now. And uh I had already designed the
7:49 layers. So just for the sake of time,
7:51 I'm just going to grab my layer here,
7:54 which is this main menu. And uh it just
7:58 has an image container. And uh it's just
8:00 like two layers. So it has two main
8:02 layers. So the main one is the main
8:05 menu, which is this um blue part. And
8:07 then inside I have the image container
8:10 on the left and the menu on the right.
8:13 So, I'm just going to grab the main menu
8:16 holding Ctrl C on my keyboard and I'm
8:18 going to go back into my overlay and I'm
8:21 going to hold Ctrl +V and paste it
8:25 inside. So now the main menu is a child
8:27 of the overlay. So anything anytime we
8:30 trigger the overlay, we have this nice
8:34 main menu. So I realized that I made a
8:36 few mistakes here and I'm just going to
8:38 clean up a bit. So inside here I have an
8:41 image, but I don't need to have this
8:44 image. So I'm going to just delete it.
8:47 So I only have the image container. And
8:50 then the main menu has a white color.
8:51 That's why you see this white
8:54 background. If we get rid of the color
8:57 as you can see. Um
9:01 um so this so the image container is is
9:03 white. So we need to get rid of the
9:05 white. And also the field which is the
9:08 main menu has a white color. So we're
9:10 just going to want to get rid of that
9:12 color for now. And I'm going to go to
9:16 this image container and uh notice that
9:21 in our video or in our website we have
9:25 something like this blue um color. And
9:28 uh this is now a critical bit. And I
9:30 want to show you how we're going to
9:37 come to the image container and uh I'm
9:39 just going to add a style here. So you
9:41 can see here we have a bunch of styles.
9:44 You have the opacity, I can put a fill,
9:46 but what I want is I want to click this
9:50 plus icon and I'm going to add um a
9:52 filter and I'm going to add a background
9:55 blur. And what this does immediately it
9:58 blurs our background. And so I'm just
10:00 going to up the background a bit. And as
10:03 you can see, we're having something very
10:07 similar to our website. So again, I'm
10:10 just going to go again to my assets. So
10:11 I had already created a bunch of
10:14 components inside here. And uh I'm just
10:17 going to look for the GT logo and I'm
10:27 But now as you can see we have something
10:30 that is really coming up and about. So
10:33 but now notice when we click this
10:35 there's something wrong with this draw.
10:37 And you might ask why is it not
10:40 occupying this space? It's because we
10:44 need to tweak the width of this
10:47 um we need to tweak its width so that we
10:49 have something that stretches all the
10:53 way to this part. So I'm just going to
10:57 go back and uh I'm going to go to um my
11:00 overlay again and make sure you grab
11:03 this main menu and the width has to be
11:05 as you can see it's 1200. I'm going to
11:08 set it to a relative 100%. And now I'm
11:10 also going to make sure my height is set
11:13 to view port so that it occupies the
11:16 whole height of my viewport. So if I
11:17 open the drawer now, it should be able
11:26 website. So I want you to spot our menu
11:29 bar. As you can see, we can still see
11:31 this hamburger menu, but we need to take
11:34 it behind. We need to take it behind
11:37 this overlay because the overlay has to
11:39 come on top of everything. So, I'm just
11:41 going to come to my overlay and I'm
11:44 going to bump up the Z index to around
11:47 like five. Five is good. And
11:51 then now it should look pretty neat. So,
11:54 as you can see, we have it. But now we
11:56 also need to put the X icon here so that
11:59 when we click this X icon we can go back
12:03 to the original page. So I'm going to go
12:06 to my overlay and um again I'm going to
12:10 come to my asset and here I have my
12:14 bugger icon menu bugger icon. I'm just
12:15 going to take it and drag it
12:20 here and uh currently it's positioned
12:22 relative to these other layers. That's
12:25 why it's going just beneath this spot.
12:28 But what I want to do is I want it to be
12:32 somewhere around here. So I'm first
12:35 going to change the variant to the X. So
12:37 I'm going to make sure it's opened. Then
12:40 I'm going to make sure the position type
12:43 is set to absolute. Now we can drag it
12:53 So, I think that's pretty neat. Again,
12:56 we need to come here and do the same.
12:59 Add an event to this layer or button.
13:01 And to do that, again, we come here to
13:04 interactions. And uh I'm just going to
13:07 click here, close overlay. So, once I
13:09 click this part, it's going to close the
13:12 overlay. So, I'm going to click done. So
13:16 now as we view the page um if I click
13:19 this draw and as you can see we have
13:22 this nice then when I click X it just goes
13:28 out. I'm going to go back to my layers
13:31 and I'm going to go back to my overlay.
13:33 And now what we want to do now is we
13:37 want to add this effect where if I hover
13:39 inside we have an image coming from
13:42 right to left. And as you can see when I
13:45 hover on every character name that is
13:48 exactly what happens. So for us to do
13:50 that we need to first come to the main
13:52 menu and I'm going to convert this main
13:57 menu into a component. So I'm just going
14:01 to hold Ctrl Alt enter. Sorry I'm going
14:04 to hold Ctrl Alt K. That is a shortcut
14:07 for creating a new component. Ctrl Alt
14:12 K. And then I'm going to create and then
14:15 I'm just going to come here to um this
14:17 primary. So as you can see now we have
14:20 this primary and now we're in this uh
14:23 component editing environment.
14:26 So so the next thing I'm going to do as
14:28 you can see currently this variant has
14:31 the image container and the menu layer.
14:35 So I'm going to hold F on my keyboard.
14:37 Wait I'm not going to hold F. I'm going
14:40 to come here to my home section and I'm
14:43 going to locate this image that I want
14:45 to use first, which is this one. Going
14:47 to hold Ctrl
14:50 C, copy the image. Okay. And then I'm
14:53 just going to go back to this component,
14:56 which is this one, which is the overlay
14:58 main menu. Double click it. And then I'm
15:00 just going to hold Ctrl
15:02 +V. And as you can see, we've pasted
15:05 that image inside this. just it goes now
15:08 behind or just underneath this menu. So
15:10 I'm going to change the positioning type
15:13 to absolute positioning and I'm going to
15:17 position it to the center of our screen.
15:19 But again we also need to change the Z
15:23 index so that it goes behind our
15:36 menu and then since this is a primary
15:39 and the primary generally we don't want
15:42 to see the image I'm just going to click
15:43 right click and make sure I hide the
15:46 image so that we only see this logo.
15:48 will go here. Then I'm going to create a
15:50 new variant. And in this new variant is
15:53 where I'm going to now show this image.
15:55 So I'm going to click here, show. And
15:58 now we have the image inside
16:00 here. And now, as you can see, we have
16:02 the image. So the reason why you can see
16:05 the image after we've clicked show is
16:09 because this image container has um as
16:11 you can see it has this background blur
16:14 style. So I'm just going to minimize it
16:16 to zero. And then now, as you can see,
16:19 we have this nice image. And then I'm
16:21 going to go to the GTA logo and I'm also
16:25 going to make sure it's not visible. So
16:27 now, as you can see, we have something.
16:30 So now we just need to add an effect to
16:32 our image so that it moves from, you
16:37 know, left to right as we as we move.
16:46 now, and then now what we want to do is
16:49 come here to the effect and click this
16:52 plus icon. And I'm going to click here,
16:55 scroll transform. And then I want it to
17:00 trigger when the layer is in view. And
17:02 uh sorry, it has to be not scroll
17:05 transform, but actually scroll animate.
17:08 So let's go to scroll animate and make
17:10 sure the trigger is layer in view which
17:13 means our layer is a image. So again
17:15 start at the center of the viewport.
17:17 That is okay. And then I'm just going to
17:20 tweak the transition enter exit. So I'm
17:24 going to give it an opacity of one. And
17:27 then I need to give this um some
17:30 transition value.
17:34 So, so uh what I'm going to do here is
17:37 I'm just going to use 10 as my dumping
17:41 and stiffness as one. So, this is a
17:43 preview. As you can see, this is how the
17:46 transition will happen. And then we need
17:48 to go and make sure that we have an
17:51 offset. And uh we want to offset it
17:55 from the right side so that it now
17:58 starts to pan from this right side and
18:01 goes inside to zero. So this is
18:05 perfectly good. So now uh now the next
18:08 thing is I want to link the hover
18:10 effect. So when I hover on this name
18:14 called JSON uh we go to variant two. So
18:17 you can click this Z icon and you can
18:20 just connect it to variant two and the
18:22 trigger interaction is when mouse
18:26 enters. So what happens now if when the
18:28 mouse enter here we're going to change
18:30 to variant two and we can even preview
18:33 it and see if it works. So when my mouse
18:36 enters you can see we have this nice
18:39 transition that comes inside our page
18:41 and it comes from the right side to the
18:45 left side. So since as you can see what
18:48 happens here is that it gets to a point
18:51 where the image stops moving. So we want
18:54 to extend make sure the image gets to
18:56 somewhere like here.
18:58 Okay. And we also want to make sure when
19:02 we stop hovering the image uh goes back
19:04 to its original position. So, the first
19:06 step is I want to go back to my image
19:11 and um I want to make sure that it's
19:16 it's currently just um sorry, I'm just
19:18 going to make sure that make sure it's
19:20 only pinned to the left side and I'm
19:23 just going to drag it to this
19:25 part because eventually I want this to
19:29 be my final view. So, this is why I want
19:33 it to be um - 360. So the second thing
19:36 is I'm going to go to this um JSON one
19:39 and the layer and I'm going to add an
19:42 interaction is uh new transition. When
19:45 the mouse leaves I want it to go to
19:48 variant two. Basically when the mouse
19:51 leaves here you go back to variant two.
19:54 So when mouse leaves that is exactly
19:56 what we want.
19:59 So we can now view the page. So when I
20:01 click here adjent have this nice
20:04 transition. When I get out, as you can
20:07 see, we've achieved what we wanted. So
20:10 I'd like to challenge you and just tell
20:13 you to do the same for these other
20:15 characters. Uh you can do the same. It's
20:18 pretty much the same job and it can even
20:21 help you practice your skills and even
20:24 make you better designer and brings this
20:37 um I'm going to go back to my overlay
20:39 and uh I'm going to double click it
20:42 again to go back to this part. And uh
20:43 I'm going to click this main variant,
20:46 which is my primary. And I'm going to
20:48 click here, new variant. And I'm just
20:50 going to come here and drag this new
20:54 variant three to somehow here. So just
20:57 so it goes below this primary and then
20:59 I'm going to name this going to name
21:02 this the download. Okay.
21:05 So now this is where we want to put all
21:08 the uh information that is in the
21:10 downloads here. So the good thing is
21:13 again I had already created that part.
21:16 So I'm just going to come here to my um
21:19 menu and as you can see I have this
21:20 layer called downloads and it was
21:22 currently hidden. So I'm just going to
21:24 right click and show it so that you can
21:26 see what I have. And then I'm going to
21:29 come here to text and I'm going to hide
21:31 this because we no longer need it. So
21:35 what we have here is that we have this
21:37 uh download stack and then we have this
21:41 part which actually should come below uh
21:44 should come underneath this part. Okay.
21:49 So now inside here we have this um uh we
21:52 have this stack and inside this stack we
21:54 have the download card and these cards
21:58 are actually a component and um let me just
21:59 just
22:03 um uh let me just show this again and uh
22:05 we have now this cards and if I double
22:08 click the card it takes me now to the
22:10 component section where we can design
22:13 the cards individually and even here
22:16 What happened is that I just created a
22:20 hover hover um type and then I just
22:23 changed the colors and also on this
22:25 hover variant I just came and made sure
22:28 that it had a solid border with a width
22:31 of four and a solid type style. And now
22:35 we're going to have this um effect. And
22:38 what happens here is that since this is
22:41 a component, we can just duplicate it
22:44 and we can only need to change the the
22:47 the image inside it by changing the
22:49 image. So we can for example pick up a
22:52 random image here and just
22:56 um put it inside. So that's a good thing
22:59 about components and you'll see that um
23:01 it's going to apply the same you know
23:03 the same uh effects and the same
23:05 characteristics. But now let's go back
23:07 to our page and I want to show you
23:10 something else which is very critical is
23:12 that if you check this stack what we
23:15 have here is you can see this blue line
23:18 here. it means that this stack car has
23:21 um it kind of overflows and this stack
23:23 has a specific property that I'm going
23:27 to show you that it's called
23:30 uh um let me just show you.
23:32 This stack has a property called
23:36 overflow scroll and uh overflow visible
23:39 overflow scroll and what it means is
23:43 that whatever overflows and uh sorry
23:45 it's actually the download speed is the
23:48 one which has an overflow scroll. So let
23:50 me just get this back to overflow
23:54 hidden. So if you can see this downloads
23:57 uh layer that we've just brought in, it
23:59 has this property called overflow
24:02 scroll. And what happens here if we put
24:05 overflow hidden, you can see we can no
24:06 longer see
24:10 um the other layers because we have to
24:12 increase the size. So we can see the
24:15 other remaining layers. But notice here
24:17 we just need to work with a specific
24:20 height and we still want to be able to
24:23 see the content inside it. So to do that
24:24 that's why I'm going to use overflow
24:27 scroll here so that we can be able to
24:31 scroll as we view the other part of the
24:33 videos. So again I'm going to delete
24:36 this card which is a duplicate of it.
24:38 And now we have this nice overflow
24:41 scroll. And then of course inside here I
24:43 have this menu button. But if I go back
24:46 to my parent, which is this downloads
24:47 layer, and I show you like overflow
24:51 visible, um you won't be able to see
24:55 this button because this um this one is
24:57 set to overflow visible. But anyway, I
25:00 hope you get what I mean is that this
25:02 part is set to overflow scroll. So we
25:05 can be able to scroll it. So let me just
25:07 show you what I mean. So, as you can
25:10 see, we can now be able to scroll around
25:12 and um yeah, which is pretty
25:14 interesting. So, but now the tricky bit
25:17 is how can we make this how can we style
25:20 up this overflow scroll? Remember in our
25:23 design we have something like this. We
25:25 have this overflow scroll on the right
25:28 side. We have this nice um subtle fade
25:30 in effect here. As you can see, just
25:33 looks quite polished and professional.
25:37 and ours looks a bit of um you know
25:40 something just too rigid. So we're going
25:43 to try and fix that now. So what I'm
25:46 going to do is I'm going to go to my
25:49 layer which is this downloads layer and
25:51 I'm going to change the position in type
25:55 to absolute. And what this means is I I
25:58 don't want it to be relative to this top
26:00 layer and this bottom layer. So, I'm
26:02 going to make sure it's pinned to the
26:05 left side. And I'm just going to use a P
26:08 on the left side. I'm going to use 54. I
26:12 can come to this um menu. And um as you
26:14 can see, it has a padding of 54. So,
26:16 again, I can come back to this downloads
26:20 and make sure it's pinned to 54. And
26:21 then I'm going to change the width of
26:24 this. And I'm going to give it a
26:26 relative width.
26:28 And what happens is that it takes
26:31 100%. But that's not exactly what we
26:34 want. I want it to be somewhere around
26:37 here. And then again, this is a very
26:39 critical bit. I want us to have some
26:43 space between this um scroll bar and our
26:46 videos. So to do that, I'm going to come
26:47 here to
26:50 my downloads and I'm going to come here
26:52 to my padding. And on the right side,
26:55 I'm going to use 54 padding on the
26:57 right. Now, as you can see, we have
27:00 something that is coming very clean. So,
27:03 we have just done this 54 here and 54
27:07 here pinned to the left
27:09 side. So, the second thing is I want us
27:12 to have this effect where you can see
27:14 that there's kind of like a shadow here
27:17 or like a fade in color. And we're going
27:19 to try and trick our way into this. And
27:21 what I'm going to do is I'm going to
27:25 insert um um let me insert an
27:27 interactive slideshow. I'm going to drag it
27:28 it
27:30 inside. And uh I'm just going to click
27:33 this uh downloads uh layer that we've
27:35 just inserted. And I'm going to hold
27:38 Ctrl X and I'm going to drag it outside
27:42 here. Paste it here. Ctrl + V. And then
27:44 we're going to put it there. And then
27:46 what I'm going to do is I'm going to
27:50 connect this slideshow to this beat. And
27:52 as you can see, we have a slideshow
27:54 which has taken. And I'm going to hold
27:56 Ctrl X and I'm going to copy my
27:59 slideshow inside here. Going to drag it
28:02 on top of here. And then I'm going to
28:05 make sure my slideshow has a relative
28:11 And then I'm going to make sure the
28:14 height is set to
28:16 594. So now as you can see we have
28:20 something coming up. And the second
28:21 thing is
28:25 uh the slideshow is also positioned
28:27 relatively. So I need to come and change
28:29 it to absolute. And I'm going to do the
28:32 same thing as I did with this downloads
28:34 part. And I'm just going to make sure
28:37 this is pinned to the right as a width
28:41 of um uh its absolute positioned as a
28:43 width of 82%. But I'm going to drag this
28:47 and make sure it captures this part like
28:49 that. And as you can see, we have
28:52 something similar. Then I'm going to go
28:54 to my slideshow and I'm going to change
28:58 the the the direction to top to bottom.
29:00 And then I'm going to also make sure
29:03 that I remove my arrows because I don't
29:06 need no arrow. I also going to make sure
29:09 that I have a fade. And the fade is the
29:11 one which is going to add this nice
29:13 effect. And then I'm going to make sure
29:16 I don't have any dots. And now I think
29:20 it's looking pretty professional. And
29:24 so now we can even easily view it. And I
29:26 want to show you how it looks like. So
29:30 if I go back to um if I view it, as you
29:33 can see, we have this nice uh fading
29:36 effect at the bottom, which I think
29:38 actually gives it a professional look. So
29:40 So
29:44 um what now we're going to do is because
29:46 this is a download section, I need to
29:49 come and tweak this part here. So
29:51 because this is not the people section,
29:53 I'm just going to come here to people
29:56 and I'm going to change this variant to
29:58 nonactive. And then I'm going to change
30:00 this since this is a download bit. I'm
30:03 going to change it to active. So it means
30:04 means
30:07 that once we get to this page, this
30:09 downloads part is the one which is
30:11 active. And again, I'm going to come
30:13 back now to my main primary and I'm
30:17 going to hold this um downloads variant.
30:19 I'm going to hold L on my keyboard and
30:21 then I'm going to drag it inside here.
30:23 And I'm going to say on click, we're
30:26 going to switch to this
30:30 bit. So now when I go to my homepage, as
30:33 you can see, we can test it around. And
30:36 so when I click here, downloads, we have
30:40 this amazing amazing effect. So I think
30:44 it looks pretty good. And then um yeah,
30:46 so as you can see, we can go back. Okay,
30:48 we need to change something here so we
30:51 can be able to go back. So if I click
30:54 overlay, I right click it, I come and
30:57 click this people. So make sure that
30:59 when I click this
31:03 um when I click it so I go back to my
31:07 primary. So now when I view it again,
31:11 let me show you. So um so let me show
31:14 you when I click this people it's this
31:17 one works well but again as you can see
31:19 we need we have some space on top of
31:22 this so we need to fix it and but as you
31:24 can see when I click downloads it comes
31:26 really nice and when I click people we
31:30 go back to our original state so let me
31:33 just fix this bit
31:35 here and there just a bit of an
31:38 adjustment of the height of the image
31:40 So, I'm going to right click this and uh
31:43 I'm going to go directly to this image
31:46 here, which is the image um uh which is
31:48 this image layer. And I'm going to make
31:51 sure that it's pinned to the
31:54 top. Make sure it's pinned to the top
31:58 and put zero there so that um it's
32:00 actually make sure the image is pinned
32:03 to the top and bottom so that it can
32:06 adjust with the height of the screen.
32:09 So when I view my website, as you can
32:12 see now, if I click JSON, we have this
32:15 nice pan effect. And also when I click
32:18 this downloads, we have this nice nice
32:22 um showcased. And then again, we still
32:24 have some problem here because as you
32:27 can see, this uh scroll bar is not fully
32:30 hanging this corner. So perhaps some
32:32 some small tweaks we haven't done
32:35 correctly. Um, let's just check it
32:38 again. So, I'm going to come here and
32:41 make sure that okay, we know the problem
32:45 we have. Make sure this is set to
32:49 um make sure it's pinned to this uh end
32:52 part. Okay, so that it's always sticking
32:54 to the end. So now when I view my
32:56 website, as you can see when I come
33:00 here, which looks really nice. So, we
33:04 have this nice nice um very nice um uh
33:07 menu bar. Again, when I hover on JSON,
33:10 we have this idea. Again, I still gave
33:12 you the assignment to try and do the
33:15 same for these other names. Let's go for
33:16 these downloads. I've already done it
33:18 for you, but you can see.
33:21 And so the next thing I want you to try
33:24 is if you can try and do the same for
33:26 these places and trailers then you're
33:29 going to be quite good at your skills.
33:31 So my assignment to you is try and make
33:35 also these buttons clickable and uh it's
33:38 the same logic that we used here is that
33:40 you want to create another variant and
33:43 you want to make sure that
33:47 variant links to um the correct text or
33:50 content inside it. Luckily this layer
33:54 that I had already pasted inside has
33:55 other variants. So as you can see I have
33:58 the city text here. So you just need to
34:00 come on the city text and click visible
34:02 and it's going to appear here. And do
34:06 the same and hide this um hide this this
34:08 one for the downloads. And you're going
34:10 to do the same and create different
34:13 variants for different pages.
34:16 So, it might sound like a lot of work,
34:19 but this is something that really
34:21 separates most people is that you just
34:23 need to put in the practice and
34:25 eventually you're going to be on your
34:34 So, I think we've done the heavy lifting
34:37 and um uh everything works perfectly
34:40 good. And as you can see, we have
34:43 something nice. So again, if you want to
34:46 remix this file, you can find the remix
34:49 for free in the description below. And
34:51 um thank you for watching this far. If
34:53 you've watched till this point, it means
34:55 you're very serious about your framer
34:58 journey or your level of upskilling and
35:00 capturing new ideas, which is a
35:03 congratulations from me to you. Good
35:05 work. So thank you for watching till
35:08 this end and I will see you in the next video.
Chrome Extension