Create an Awesome Splitting Section on Scroll - Motion.page/GSAP - ScrollTrigger

Hello guys, welcome back to the channel. My name is Luke, and today we have another user-requested tutorial.

We had a user wanting to achieve an animation like the following. So as I scroll, you can see that these two sections kind of open up like this. Now it is a little bit laggy on my system. Underneath, there’s an image, and the scale is getting smaller as I scroll down. Then as I scroll back up, we have the reverse effect.

I’m going to show you today how to create something like this, and hopefully with Motion.page, we will not have these performance issues. I think this is using Framer, so I’m not sure why it’s lagging like this. Anyway, let’s get started.

So, I will be using Bricks Builder for this, and I’ve just created a page called “Split Section,” and I’m just going to open this in Bricks.

Alright, so the first thing I want to do is create a section. Inside, we have a container. If we take a look at this, we can use the main section parent as the pinned element, and then inside we can do three containers. One container is going to be underneath containing the image, and then we have this also as a container, and then we can use the bottom half as a container as well — so three containers in total.

Alright, so here I have my main container. I’m just going to call this “under,” and this is going to contain our background image. Then I’m going to duplicate this two more times. Let’s do “top half,” and we’ll call this one “bottom half.”

Okay, so on my main section here, what I’m going to do is just get rid of all of the padding because I want these containers to be flush to the edges.

Alright, so first, let’s give this a class so this will be easier to target in Motion.page. I’m going to give this a class of “split section.” Then let’s go to Layout > Padding and we’ll just put all of these to zero.

Also, if you look at this original one, you can see that these two halves are going off the screen, so I want to set the main parent section to have an overflow of hidden. Alright, so we’ll do that as well. We’ll scroll down here, go to Overflow Type: Hidden.

And then, because I want these to be contained on top of the image, the image is going to be set to absolute — so that means our section also needs to be relative. So, position: relative.

I’ve just realized I made a small typo here with my class, so I’m just going to fix that. Rename from this to this one. Rename. Okay, and save it.

That should be everything for our main section. Now let’s go to our background section. I’m going to call this “split section background.” I’m going to set the margin to be zero so it is flush. I want to make sure that the width is 100%, and I also want to make sure that this is taking up the full height of the screen as well. So we’ll do height: 100vh — and actually, we can put that on min-height like so.

Remember, I want the top half and bottom half to sit inside of this, so I’m going to set this to be position: absolute. Alright, just like that. Perfect.

The last thing I need to do is add a background image. So I’ll go to Background, and I’ve just chosen an image from Unsplash. I’ll do custom URL here. Then I want to make sure to center everything.

I’m noticing that it’s getting cut off here, so let’s just make sure our section also has a min-height of 100vh. That should fix that situation.

Next, we have our top half and bottom half. Once again, let’s give these classes. I’m just going to copy this from here and instead of “background,” let’s do “top half.” And then we’ll do the same here — just call this one “bottom half.”

Alright, so on the top half, what I want to do is come here and center align everything. Then I also want to put everything to the bottom because we will be adding text to this.

Then let’s give it a background — let’s just do “background body” like that. And we need to make sure that it is sitting on top, so I’m just going to go to Layout > Z-index: 1. Now I can actually see it.

Margin needs to be 0 0, like so. We need to give it 100% width, and the height wants to be 50vh — like that. So it’s taking up exactly half.

Okay, cool. Now we’ll do the same once again for the bottom half. So again, we’ll do 0 0. Width is 100%. Z-index: 1 so we can see it on top. We’ll give it a background, and once again the height will be 50vh. This time in here we’ll center align everything, but we’ll put everything to the top.

Okay, I’m going to save changes. Now in the top half, let’s add a text element or a header like this.

Because on the top half we put everything to be aligned at the bottom, that’s why the text is at the bottom here. We don’t need to add any animations to the text in Motion.page, so I’m just going to style everything on the ID here.

What I’m going to do is I don’t want any spacing. So I’m going to do a line height of 1, font size: 20rem — so it’s pretty big.

For the actual content, let’s just go like this. I’m going to duplicate this and put it into the bottom half like this. So each half needs to contain the same text.

Next thing I’m going to do on this one is just translate it by half of itself — 50%. Now if you remember, on this section we did overflow: hidden, which is why it gets cut off. Then on this one, we’ll just do the opposite. We’ll translate it -50% of itself.

So now, as you can see, it lines up quite nice. But in actual fact, we have the bottom half with one text element, and the top half with another text element — which now means it looks like one element.

Okay, so that’s pretty much it for your setup. Let’s go ahead and open Motion.page and add some animations.

Alright, so I’m going to go and create a new timeline here. We’ll call this “Split Section.” I’m going to target our newly created page here, and let’s do scroll trigger. We need to lock this to the scroll bar. I’m going to use a short timing delay here — 0.2.

Pinned element — we do have a pinned element, and this is going to be our main section. The class for that was “split section,” so we can just target that in here: split-section.

Alright, so when the top of the section reaches the top of the viewport, which will be 0%, we want to pin it. Then once again, when the top reaches -100% of itself, we will unpin it.

You can see my scroll bar is moving, which is good — it means this is pinned because this is not moving. Then we can animate our elements while this is pinned. So we can use the same timeline here.

So first, let’s target our top section — top half — like so. All I want to do is on “to,” I want to translate it -100% of itself. So as I scroll, you can see that’s moving like so.

Now I’m just seeing — perhaps we did in fact forget to add overflow: hidden. So I’m going to go back here and add that. Yeah, you can see I missed that by accident. So overflow: hidden. And I’ll do the same for the bottom half as well. Alright, save.

Let’s go back to Motion.page and just do a small refresh here. So now you can see that’s looking much better.

Alright, so what I’m going to do now is duplicate this node. On this one, I’m going to right-click > Edit. Now we’ll do bottom half, and we’ll just do the opposite — so we’ll do 100% of itself.

Now it looks like this. There’s only one thing left — which is to scale our image.

On the original, remember, the image scales down. So let’s add a new node here, like so. I’m going to target the whole container — “under” — and the class is “split-section-background.”

From: I’m going to start the scale at 1.2, and I’m going to scale it down to its original size of 1.

Okay, so let’s take a look. And that’s what it looks like.

I’ll save this timeline. Then in Bricks, I’m just going to go and add another section underneath so that we can scroll beyond. I’ll just do a height here of 100vh so we have a lot of space to work with.

Now let’s take a look on the front end. So I’m going to scroll like that — unpinned — and then we continue scrolling. There are no overflow issues because on the parent section, remember, we did overflow: hidden. So the scroll bar is always going to be the same size and there’s going to be no layout shifts or anything like that.

Also, the performance is looking much better than this one as well — which is always a bonus.

So there you have it, guys. I hope you liked this simple but effective animation. Thank you to our user who requested this. If you did like the video, please don’t forget to give it a thumbs up, and I will see you again in the next one. Thank you.