Create Awesome Scaling Effects using Pinned Section - Motion.page/GSAP - ScrollTrigger

Hi guys, welcome back to the channel. My name is Luke, and in today’s video, I want to show you something like this. This was user-requested in our tickets. This is from DJI’s website.

The main section I want to focus on is right here. You’ll see this picture scaling in. Now it pins, and then the text and an overlay at the bottom come into effect. Nothing too crazy, but yeah, let’s dive right into the video.

Once again, I will be using Bricks Builder to create this animation today. So I’m just going to click here, add a new page, and I’m going to call this “DJI.” Publish and edit with Bricks.

Okay, so the first thing I’m going to do is just set up two sections so I have some room to scroll, just so that we can see the animation in action. I’m going to create a section here, and edit this on the ID just to make it quicker. I’m going to make it 70 viewport height. In the container, I’ll just put this to 100% height as well, so it takes up the whole room.

I’ll duplicate this, so these are going to be our buffer zones. In the middle, we’ll focus on our main animation. I’m going to set up a new section and give this a class so it’s easier to target in Motion.page. I’m going to call this “DJI main section.”

What I want to do is use this main container inside as our main element that we will scale. This will contain our background image as well, so I’ll give this a class as well: “container.” If we imagine when we scroll down, we want this container to be 100% width and height, so I’ll do that from the get-go.

The way I’m thinking about it is: I’m thinking about the end result first. Then in Motion.page, we can simply edit the initial state of it. I hope that makes sense, but you’ll see what I mean when we go into Motion.page.

For this container, I’m going to set the initial values to be 100 viewport width. There is some padding there because on my theme styles, you can see my section has some padding. To overwrite that, I’ll go to my class layout and set these to zero. I’ll also do the same for the padding, just so that it spans the whole section.

Now on our container, I’ll do the same for height — viewport height. So now you can see it’s going to take up the whole room. Let’s go ahead and add our image. I’ll add it as a background image, and I’m just going to copy the URL from DJI’s website so I can reference it in Bricks. There’s the image in our container — that’s perfect. I think that’s pretty much it for now, so I’ll save this and let’s head over to Motion.page to start the animations.

Let’s create a new timeline. This timeline will be for our pinned element — this will be the section. Let’s rename this first to “pinned section.” Let’s target our new page. This is going to be a scroll trigger, locked to the scroll bar, and 1 second is good.

First, let’s go ahead and pin the section. Remember, the section has this class. I’ll just copy this. “Pinned element” needs to be checked. “Pin selector” — paste in our class. Now let’s change these values. When the top of this section reaches the top of the page — that’s 0%. Then when the top of this section scrolls up to, say, -200%, we want it to be pinned.

You can see I’m still scrolling — and there we go. So that’s pinning nicely. While that’s pinned, what we can do now is animate the actual container. Once again, I’m going to grab this class and go down to our animation section. I’ll target our container.

What I want to do is animate it from a scale. Since this view is our finished state, that’s good, so I don’t need to do anything in “to” this time. But we do want to animate it “from” a scale of 0.7.

Now you can see it scales quite nicely. That’s a little slow for me, so I might change this value to -100, which is just the height of itself. So as I come down, it scales like that.

The only issue with this is we want it to start scaling up when it reaches around here, and unfortunately that’s not possible because we’re using this timeline with the pinned element. It’s only going to start animating once the section reaches the top. That’s a limitation.

So what we can do instead of animating the image here on this timeline is just remove this. I’ll save the timeline. We’ll use this timeline just for the pinned section.

Now what we can do is create a new timeline and call this “DJI image scale.” Once again, we’ll use the same values to keep things consistent. I don’t need to pin anything here, but I’ll target our container again and do a scale of 0.7.

Now, because we are separating the timelines, we have much more control over when this is going to animate. This actually looks perfect. The start viewport is around 25% at the bottom, so now it’s starting to animate much earlier, which is much more desirable. That looks good so far. I’ll save the timeline.

Back in Bricks Builder, we need to add a title and an overlay. I’m going to add those under the section. Let’s add our heading, and I’ll add a block which we’ll use as our overlay.

First of all, we need to set the section to be relative because the overlay needs to be set to position absolute. I’ll copy this class. For the overlay, I’ll give this a new class and call this “DJI overlay.” I’m going to set this to position absolute and set all values to zero so it spans the whole thing.

I’ve already gone ahead and added a gradient overlay. I’ll show you the values. On the class “DJI overlay,” I’ve set this to “overlay.” The colors are basically transparent at the top with a color stop at 30%, and then I’m using a dark color at the bottom. It’s important to make sure that this blends in with your next section’s background color so it looks better.

For the heading, I’ll put it inside the container and style it so it looks better. I’ll center align everything and give some padding to my container as well. I’ll use a variable — “L” — at the top.

Now I’ll go grab their title — in this case, it’s Japanese text because I’m based in Japan — and I’ll use the same. I’ll give it a max width of 750 pixels and center it.

Now we have our text element and overlay element as well. I’ll save this.

Back in Motion.page, I’ll refresh the page. Now we can see our elements. Logically, we want the image to first scale up, and only after the section is pinned do we want to animate those elements.

So we could go back to our pinned section animation and run the animations in here. First, I’m going to target our overlay. I’ll copy this class.

I don’t want to scale it. I want it to start with an opacity of 0 and translate on the Y-axis about 20%. Then in “to,” we’ll bring it to opacity 1 and translate Y to 0.

Now you’ll notice we don’t have an overlay until the section is pinned. Once it is pinned, the overlay comes in and translates up. Quite a nice effect.

Next, if we check the original animation, everything scales up, and text comes in with a translate as well. So let’s go back. I’ll duplicate this animation node, and this time I’ll target our text element. I’m just going to use the ID for now to make this a bit quicker.

We should get the same animation. I’ve just moved these nodes forward a bit so once the image is scaling up and pinned, the text and overlay come in.

After some tweaking with the nodes, it looks like this: our image is scaling in, the text comes in, and then the overlay. I’ll just extend the overlay a bit.

I’ll save the timeline and reopen the scaling animation. I might want to make it a bit quicker. To do that, I’ll simply change the value of our trigger points. Let’s set “ends when the top” to about 50% — maybe that’s too quick. Let’s try 30.

Looking at DJI’s website, we can see it pins there and goes to 100%. I’ll set this to 0 so it scales uniformly from top to bottom — that’s a little better. Save the timeline.

Now I’ll show you what this looks like on the front. We scroll down, the image is scaling up, we get our text — which is unfortunately behind our header — and then the overlay, then scroll down.

I’ve just altered the padding a little bit. Refresh. There’s our text and overlay. Continue scrolling.

There you have it, guys. Thank you very much once again for watching. I hope you enjoyed this video. Please don’t forget to give us a thumbs up if you haven’t already, and I’ll see you again in the next video. Thank you.