How to Create Pinning Elements and Awesome Scaling Effects!

Hello guys, welcome back to another video tutorial. Today's tutorial is going to be a little bit longer, and we're going to use a little bit more advanced techniques. We're going to use two pinned elements on a single page. We're going to cover common problems among our community members. When you pin elements, sometimes you get this weird stagger effect in the scroll bar. You also have some white space below the footer sometimes or below some sections. Now, I will cover that in this tutorial, and I will show you how to fix that quite easily. Also, we're going to use some nice scaling effects. Let me show you what we're making here today.

If I scroll down here, this is obviously a page about Japan. We have a hero section here, which is kind of basic. Then, as we scroll down, we're going to reach this element here, which is representing kind of a shrine. This is a pinned element, so it zooms in and it blurs out. The layer underneath also comes into focus. It starts out blurry, and then you get this fading in another CTA, and then unpins itself. Then you come down here to a Japanese flag. This circle grows bigger to reveal another CTA. Here's the footer. As you can see, we have two pinned elements, two pin sections. There's no jittering happening whatsoever with the scroll bar, which I do see quite often with our members' websites. It's nothing too fancy. Obviously, it's a very basic website, but I just wanted to show you these neat features today.

Here's how I did it. Let's go ahead and set up our page here. Now, the way that I want to do this today is to try to encounter problems on purpose. And that way, you can see how I will troubleshoot those issues. So, I'm just going to add a page here. We'll call this 'Japanese page.' I've already set up a template for this 'Japanese main.' This just uses an overlay-style header, and I'm going to publish this first and then edit with Oxygen. Alright, so as you can see, we just have a basic header and footer here, nothing too crazy. What I'm going to do first is work on our hero section.

All the hero section is going to be is it's just going to be a full page, so full viewport height, and it's just going to have a background video with kind of nice highlight reels and drone shots of Japan. So, let's do that. So, I'm going to add a section, and this section I'm going to change the size here to 100 viewport height. That's the first thing. Next, what I'm going to do is I'm going to make sure everything is centered. So, I'm going to go 'horizontal middle' and 'center' like this. And then, I'm going to add a div. This is going to act as a container for our text and buttons. I'll just call this 'hero container' like that.

For now, let's just continue working on this section here. So, what I'm going to do is I'm going to go here, 'background,' and I'm just going to add a video that I already have downloaded. This is the video. Okay, and one more thing I'm going to do is change the image overlay color just to darken it up a little bit, just so it's not so vibrant. So, to do that, we will need to go to 'video overlay,' and I'm just going to put this to something around maybe 0.75, 75, something like that. Alright, cool.

Now, let's work on this 'hero container.' So, I'm going to have basically three things in here. I'm going to have a subtitle at the top, a main title, and then I'm going to have another wrapper, which is going to contain two buttons. So, in here, let's add a heading, and I'm going to duplicate this one, and then we'll add another div. This is going to be our button wrapper. All buttons want to be centered in there. I also want to center everything in this container, and then we'll put some buttons in here. Duplicate that one. This is going to be a button secondary.

Okay, this button wrapper wants to be horizontally aligned like this. I'm just going to add some classes to make these into buttons and duplicate this one again. Actually, the secondary. Okay, and let's add some text to these buttons. So, 'text,' this is going to be 'Explore More,' and this one I'm going to say 'Purchase Tour,' something like that. I'm going to put a gap on this. Okay, on the main 'hero container,' I want to do some margin spacing to separate everything like that. Okay, now what I'm going to do for this... Radiant and other five. This one wants to be 'Header 1.' Let's make this 'Heading Light' from 'Exo 4.'

Making some changes here to improve this. And then let's change this to Japanese. I'm just going to apply a Japanese font to this, then 'Antique.' Okay, so that's the hero section setup. I'll save this for now. The next section we want to work on is our first pin as we scroll down past the hero. The next section is going to pin. So, what we want to do for that, first we can create our sections first, and I'll show you my workflow for this.

So, 'section,' I'm going to say 'The Garden Section.' Okay, next, what we want to do is also make this 'Garden Section' 100 viewport height like this, and then in here, we can add our elements as well. So, what I'm going to do is I'm just going to copy this to make life easier, and I'm going to pop it in here like that. This section also, everything wants to be centered like so, like that. You can't see anything yet because the text is white, but we will fix this.

So, this is our 'Garden Section.' Now, under this section, we want another section, but we want these to overlap. So, conveniently, what we can do is we can put these inside of a div, and then the parent div we can use as a pin trigger. And just for now, I'm going to call this something like 'Hole,' just so I know what I'm working on here, and you'll understand in a second. I'm going to wrap this with a div, put this inside of the div, and now what we can do is we can set the 'Hole' to 'Position Absolute,' make sure these are all zero, so it spans across the whole parent. And just make sure that this parent here is set to 'Relative.' Okay, so that now should be behind or in front because it's because it's at the bottom here.

So, to make life easier, let's just add a background image to this, and the background image is going to be a garden. I'm going to use this one here. It's quite high resolution. And then if I hide this one, well, we can't see it now because we've hidden this, and this no longer is visible because it's not spanning this one. So, let's just put this to the top. For this, all I'm going to do at the moment is just change the background color just so I can see what's happening. All right, so when it's at the bottom, it comes on top, which is actually what we need. So, instead of this background color, what I'm going to do instead is add an image. I'm going to add this image, and what this is, it's basically taken from a Japanese Shrine, and the original image here had 'Japanese Garden' in the background, but all I did was in Photoshop, I just removed this rectangle part here so that it can work nicely for our purpose. So, this is kind of what it looks like. So, this is sitting on top of this section, and let's just fix this up a little bit.

So, let's go to 'Background,' we'll do 'No Repeat.' We want to make sure everything is centered, so left 50 and then top will also do 50 as well. So, you can see now you have the floor here, the top part, and on wider screens, you'll be able to see the left and right sections as well. So, I'm going to save this right now. I'm going to call this div 'Pin Trigger 1' because we're actually going to have two pin triggers on this page. So, without continuing any further, let's just open 'Motion Page' so we don't overwhelm ourselves in 'Oxygen.' So, I'm going to save this for now. I'm going to keep it open here, and then what I'm going to do is over here, open up 'Motion Page.' So, let's create a new timeline. I'm going to call this 'Japan K.' We'll load up our newly created page here, 'Japanese Page.' Here it is. So, let's scroll down.

So, as you can see, what we want to happen is when our scroll trigger, which we just created here, 'Pin Trigger 1,' reaches the top, then we want it to start pinning. So, around here it hits the top, we want this section to pin. So, what I'm going to do in 'Oxygen' to make life easier, I'm going to rename this div ID to 'JP' for 'Japanese Page,' 'Pin 1.' Close to 'Pin Trigger,' 'Pin Trigger 1.' Okay, so we'll save that. Now, we can use this ID in 'Motion Page,' and obviously, to pin something, we will need to use the scroll trigger. So, let's change our trigger here from 'Page Load' to 'Scroll Trigger.' Alright, now we want to lock this. Now we want to lock this to the scroll bar. I'm going to put the delay down a little bit, to like 0.2, something like this. And pinned element, we also want to check. Now, we have the option to select our pinned element trigger, which is the ID. And what we want to do is we want to say when the pinned element's top, so here, the top of the pinned element, when this reaches the stat Viewpoint, so we want to put the stat viewport right at the top here, so that when the top of this reaches the top of the viewport, then it pins. So, we want this green line to go to the top. So, I'm going to change this to zero. And then, we want it to finish when the top, again, of our pinned element reaches minus 100. So, when it goes all the way off screen, minus 100, we want it to stop pinning. So, now, when I scroll down, let me just save 'Oxygen' first and refresh.

Okay, so now as you can see, when we scroll down, the top of that element... I'm still scrolling, and I am scrolling for the duration of how tall this element is because, remember, this is minus 100% of the element's height. We're technically scrolling down for the duration of however big this is. If I change this to 2, minus 200%, then what that's going to do is it's gonna make it so I'm gonna scroll down for the equivalent of two more of this element's height. I hope that makes sense.

So, what do we want to happen? Let's think about this. So, first, we don't want to see this element at all. And then, we also want this element, which has the 'Hole', we want it to scale, so it's going to have the effect of us zooming in. And then, we also want the garden section to scale up just slightly, so it looks like we're zooming in and getting closer to it. So, let's work on this one first. All right, so what I'm going to do is I'm going to add an animation selector. Before that, what I'm going to do is conveniently name our element here. So, I'm going to call this ID 'JP' for Japanese page. And then we'll call this 'hole section,' the garden section is going to be 'Japanese page garden section.'

And then let's go to this element here. For this one, because I'm going to reuse this in the next pinned element, I think, so what I'm going to do for this one is just add a class so we can reuse it. So, this class is going to be called 'JP.' Let's see, 'text container,' something like that. Sorry, Oxygen does not allow the full stops at the beginning. Save this. All right, so let's first work on this 'hole' element.

All right, so I'm going to copy this one for my convenience. So, scroll trigger. So, this is all set up nicely. Now what I want to do is work on our first animation. Let's select this element, and remember what we want to do is, as we scroll down, we want it to scale up ever so slightly. I'm going to go on to here, scale, and I'm going to say 1.2. Let's just see what this looks like. All right, so that obviously, that's not good enough because we can still see it. We want it all to go off the screen, so let's try 1.5.

All right, let's try two. Two should be good. So, as you can see, that goes off-screen quite nicely. Also, because we're zooming in, we want it to make it appear as though it's going out of focus. So, I'm also going to add a blur as well. So, I've got a filter blur, and then let's say 20 pixels. So, it's in focus there, as you can see, and then as we zoom, it's going out of focus, which looks pretty cool.

Next, what we want to do, remember, is also make this garden section. So, this is the garden section underneath. I'm going to copy this again. I'm going to add a new animation node. We want to target a separate element now. And then let's add our garden selector. So, let's see, we kind of want it to zoom in at the same time, so that means we can put this right at the beginning. So, the animations will take place at the same time. And then I'm going to scale this up as well. So, remember, this scale is two. Now, two on here would be a little bit extreme. We want it to be really subtle. So, let's go to scale and 1.1, something like that, nothing too crazy. You can see that kind of looks nice.

And just for a better effect, what I'm going to do is I'm going to reverse the blur on this one. So, I want it to start a little bit blurry. So, let's go to filter blur and let's try five pixels. That's pretty strong. One pixel, something like that, and then two, we want to go blur zero. I guess we could exaggerate a little bit more. Let's try two. Okay, I think that works nice.

So, what I'm going to do next is focus on our container here. So, remember, we want this container to start. We don't want to see this at first. We want it to kind of come into effect. So, let's just go back here and grab this class and then add another animation node once again. And then in here, class, press enter. Make sure you press enter here, guys. Some people, they type in a class here and they just expect it to work, but you do have to hit enter for it to register. In this case, we want this one to start from opacity zero. We don't want to see this at first.

And then once we scroll down, kind of up to this point, so I'm looking at the pin here, you can see the pins moving. And I'm just going to try and find a nice point where I want the text to start fading in. So maybe around here, just as this goes off-screen, I'm going to say around here. And all I'm going to do is move this up to around here, and then the animation is going to start. So, it's going to be zero, zero, zero opacity, zero opacity. And then it's going to start here, so from 0 up to one. So, that's coming in nice as the garden un-blurs itself. Perfect.

I think I'm going to do one more thing, guys. I want to add an overlay. So, what I'm going to do is in the garden section, I'm going to add another div. This also wants to be positioned absolute. So, let's go layout absolute. I'm going to span it across the whole section here. I'm going to call this 'overlay.' And let's change the ID as well, 'page Garden overlay.' I'm going to give it a background of just something transparent. And then in motion page, I also want to control this. So, now this should have refreshed automatically. I'm going to add another animation node here. I'm just going to move this up a little bit. I want to put this in line with my text container, but this time, let's just target our new overlay element.

Yeah, so it is recognizing it, as you can see. And then what I'm going to do is to background color, let's just make it rgba000. Let's do 0.75. So now, as we scroll down, that's much better. Now, obviously, we need to fix the text container here, and all we need to do for that is just go to our yellow container. I do not -- I need to rephrase this, so this is a text container. And I'm just going to give this a higher Z index so it's on top. Let's just say five, for example. Save that.

All right, let's move this down a little bit. All right, so here's the hero. We come down, we zoom in, comes into focus, and that looks pretty good to me. Now, interestingly enough, you can see here, this is a very common problem. I'm going to save my timeline. Let's come to the front. As I scroll down, you will notice the scroll bar here. You'll notice it kind of flickers, and then we have this white space here, which is bizarre. Now, the reason for this happening, by default, our body has an overflow-x of hidden, but there's no overflow-y hidden on any of our elements. So, if ever you get this, guys, and this is, trust me, this is a very common problem, all we need to do is -- well, the reason it's happening, first of all, is this element here, this whole section is scaling up. So, it's scaling on the x-axis and the y-axis. So, as you scroll down, it's scaling up on the y-axis as well. And that's what this kind of blur is here because remember we blurred out this element, so it scaled this much beyond our footer.

So, whatever the scaling is taking place now, remember our scaling is happening on 'hole,' we'll need to go to the parent of this, which is the pin trigger, and just make sure that the parent is set to overflow hidden. And that should fix that issue. So, let's have a look one more time. Refresh, go to the top, F5. I'm going to scroll down here, zooms in nice, much better, as you can see. We don't have that issue anymore. So, just make sure that the parent element, whatever is scaling, just make sure the parent of whatever scaling is set to overflow hidden. Okay.

So far, so good. Now, I do want to change this text, obviously. So, 'text container heading,' I'm going to change this to 'I'm going to use some Japanese text here.' All right, so this says 'discover beautiful gardens' in Japanese, and then I will also put that in English. All right, and that section is finished.

But now, let's add our final section. Let's just start here, and we'll add a new section. This section is going to be called 'Japanese flag,' but this, we want to do the same, so we'll do size 100 100 viewport height, sorry. And as we scroll down here, I want this to initially look like the Japanese flag. So, instead of using pure white, I'm going to use some colors that I've prepared. So, background color is going to be this one. And once again, I want to center everything on here, so I will do horizontal middle Center.

We'll add a div, which will act as our red circle. 'Red circle,' let's change this so background wants to be red, we'll change the size to 350 by 350, like that, and then the Border radius 100, like that. So, kind of looks like a Japanese flag. Now, under this, so similarly what we did here, we got like two sections. I want to do the same here as well, so 'Japanese flag' is going to be our first section.

Now, I'm gonna duplicate this, and I'm gonna call this 'um section red background.' I'm going to remove the circle, and on this one, what I want to do is change the background color to our red, like this. All right, so this is our red section. Now, same again, I want to overlap these like we did before, using absolute and relative positioning. But let me explain why first. So, what we want to happen is, once again, we want this to pin, and once it's pinned, I want to make this circle grow bigger. And at the same time, I want the background, all of the background, as this is expanding, to also become red. And then, eventually, it's going to become this section. So, what we'll do finally with this section is just fade it out, and it will look like it's blending into this background. I hope that makes sense, but hopefully, you can understand as I show you the process.

Once again, I'm going to copy my CTA, which is 'text container.' I'm going to do Ctrl D, duplicate, and I'm going to put it in my red section here. It looks like this now. A couple of issues, I want to remove the gradients from this. Change this to actually, I think black text works quite well here. So, I'm just going to do this on the text color. And then, instead of 'Explore More,' I'm just going to use one single button here, so we don't need the wrapper anymore. So, let's get rid of the wrapper like that. All right, cool.

All right, once again, I'm just going to change this text here. Oops, this is 'Let's go to Japan,' and then I'm going to change this also to the English version, 'Discover, purchase, off.' Perfect. All right, so hopefully, all of this makes sense, and what I'm going to do is, before we go to motion page, let's set up so that this Japanese flag and the red background are overlapping correctly.

So, once again, we need another pin trigger, and that means that we will need to make a new timeline, actually, because this scroll trigger is set up for our first scroll trigger here. Sorry, this one. So, we will need to create a new timeline, so I'm going to rename this 'Japan page pin one,' so I'm just going to rename that one. And then, once again, in oxygen, let's go here. So, we'll do the same, wrap with the div, put this also in the div, and then this is going to be called 'pin trigger two.' So, let's copy this one and just rename it to 'two,' like that. This one, we will call, let's see, 'JP flag section,' 'JP flag white section,' and this one is going to be 'JP red section.'

I also want to control, remember, this circle as well, so we'll give this an ID, a unique ID, 'JP red circle,' like that. And I think that's it. This should already have a class applied, 'JP text container.' Perfect. We will add some animations to this as well. Okay, cool. Now let's go to motion page, and remember, we need to set up a new timeline. Make sure everything's working here. It looks good. So now, let's go here, we'll create a new timeline by clicking on this button, and this is going to be called 'Japan page pin two.' We also want to do scroll trigger, once again, lock to scroll bar 0.2, pin element. But this time, we want to pin this element here, so let's go here and grab 'pin Trigger 2' ID. Remember ID, boom, like this.

Now, on this one, you don't need to hit enter. We want, once again, the pinned element's top when it reaches zero, which is the top of the screen, to start pinning, and once again, when the top of the same element reaches minus 100, which, once again, is the equivalent of its own height. All right, so as you can see, that's working now. What we want to do first, guys, is remember, we've missed something, but we will come back to that in Oxygen. I want to show you how this is going to work first.

We want to target this circle first of all, but let's go here, grab the ID, and then in our animation, so we want to target that ID, hit enter over that, make sure it's working. All we want to do for this is scale it up. All right, so from the original position is fine. So, we want it to scale up to, and let's say, well, let's play around with some values first. So, as you can see, 10 is maybe far too large, but remember, if this is a huge value, guys, then it's going to make the animation so fast because the value is so high. As you can see, like this, I'm only scrolling a little bit, so this value is quite important. So, let's try 5. 5 is almost okay. I'm gonna go with 8, and I think that works pretty well.

Now, remember, at the same time, I want to control the background color of this as well. So, let's create a new animation node, and in this node, we want to select the section, right? So, the section is called 'JP flag white section.' We'll copy that, put it in here. Once again, the initial point here is fine. Hit enter, so we don't want to change anything here, but on 2, we want to go to background color. And then, all I'm going to do is just select this color here, select this. So now, once again, once it's pinned, it's gonna subtly change to that red color.

Now, I don't like that because you can still see that it's pink here. So, to change that, we can make it finish earlier. So, that means when we get to around this point, even earlier maybe. So, hopefully, this all makes sense, but because this animation node is very short now, this is still going to grow bigger, the circle's still going to expand bigger, but it's already going to be on a red background. All right, let me click on live so it's actually working. So, you can see it's blended into the background like that.

Now, remember, this is still the first section. We actually want this to blend into the section underneath. So, what I'm going to do, I do feel that this is a little bit long as well, so I might change this value to minus 75, just so that it becomes a little bit shorter and quicker. All right, cool. Now, you can see we're having this issue again, now below the footer. Well, it's not scaled enough, actually, but this is actually a good point to make. Remember to set the parent, which is 'pin Trigger 2,' to 'Overlay overflow hidden Circle.' We'll save that, and we should no longer have that issue. Let's see. That's quite fast, actually. But you can see that's fixed the issue straight away.

So, the final thing to do is, we'll go here, I will set the pin trigger to 'layout relative' because this is the parent, and then the section red background, I'm going to make absolute. And that means it's going to take the full dimension of the Japanese flag. Oh, absolute. We'll do this, so it spans across whatever this element takes up in the relative. All right. So, with pin trigger one, you'll notice that the whole, which is this thing here, is at the bottom, and that means that it's showing up on the top. So, we actually want the Japanese flag to show up on top, above the section with the red background, above this section with the text. So, to fix that, all we need to do is switch these around. And then, what we'll need to do is make sure that pin trigger, once again, is set to relative, like it is. And then, this time, we want to remove what we applied before. So, just make sure that the section red background does not have any absolute positioning, but we want to apply it to the Japanese flag instead. So, let's go here, absolute, zero, zero, zero, zero, like that, which means that this flag now is sitting on top.

To illustrate that, what I'm going to do is on the section red background, I'm going to give this a yellow background so that we can see a little bit more visually what's happening. So as we scroll down here, we're going to see on top.

I also need to fix the Japanese flag. I don't know why I gave it a red background, but let's change it back to this. So scroll down, now you can see we have the Japanese flag, we have the text sitting on top as well. We will fix that; this is going to blend into the red background.

But now what we want to do is towards the end, we want this whole section to fade out. So let's go back to the motion page. So this is this section here. I am going to duplicate this node.

And then remember, towards the end, we want it to just fade out completely. So we'll do make sure everything's removed here. Yeah, and then two, we want to fade this out to opacity from to zero from one. And let's have a look here now.

I actually don't know why this is here. Let me delete this one. Oh, of course, of course, yeah, let me fix. Sorry, guys, this is controlling our background, of course. So from two, background color, we'll just put this back to the red. Okay, so let's have a look, switch to live because I duplicated it. We want to remove the opacity, sorry. So let's have a look. So it's going back to the red color, and we could probably fade it out from around here. So I'm just going to move this to here, make sure it goes all the way to the end. So now, as you can see what's happening is the whole section is fading out and then it's just going to finally reveal the section underneath which will be our text. So once again, let's just change this to Red, so now that you see what's going on, and now that should be working perfectly. See, you don't really see it now, but the section on top is actually becoming an opacity of zero. You could also display none if you wanted, but I think this works just fine.

And now let's control the text here. So we want the text to fade in. So our text container does have a class applied. Now the problem with this that I've just realized, and this is why I'm doing everything from scratch, is because we have the same class applied to this one. Then that means once this class fades in, the one below is also going to fade in. So that is an issue right there. So we will actually need to use IDs instead, probably will be better. So all I'm going to do is just give this text here a unique ID, and we'll use that instead. So I'm going to remove this class from this one. And then let's just say 'JP flag text container' instead. Okay, save that. And then we'll use that to target it instead on this one.

So we'll set up a new animation node. Now we want this container to fade in as the section above fades out, which is this one here. So we'll put this in line like that. And then this became an ID, this one. So what we'll do now from we want it to start invisible, and then we want it to become visible. So we'll just do it like this. So I'm going to save this and just have a quick look. Refresh. So I'm going to scroll down; it's going to pin, we zoom in, the blur comes into focus, that comes in quite nicely, unpinned.

Welcome to our new PIN trigger that pin, that's growing the background, is also changing to red. The section above fades out; the section below fades in. Then we have the footer. So just a quick note, the reason I made two sections here instead of just one, I just feel like you have much more freedom if you have a section underneath, especially in terms of layouts and things like that. Now, you could just use one section if you want; you could just make the red circle grow, this section becomes red underneath, and then you could control elements all within the same section. But I just think, personally, it's better to use two sections so you can have whatever you want to become visible and have full control over that section, and then use a different section to control animations on, if that makes sense.

And obviously, you could animate independent text elements like this, but I'm not going to do that because we do have tutorials on that already. For example, you could stagger the text, things like that. So that's up to you, but I thought I'd show you this today. So obviously, this is using pinning elements and scaling effects, and I do cover also a very common issue, which is the white space which sometimes pops up below the footer or below the sections. And typically, that happens when you're scaling elements, and you're not setting the parents to overflow hidden. Keep that in mind, guys.

So there you have it, guys, quite a longer tutorial today from start to finish, and I did want to show you those troubleshooting tips. So I hope that helps, and once again, we'll be back next week with another tutorial. Thanks for watching, and we'll see you next week. Thank you.