Create Awesome Text Animations with Spans 🔥

Luke here with Motion Page once again today I would like to show you how to create something like this. This was actually requested through our tickets, asking if we could create something similar. Now, this is using a stacking effect, but it's also stacking mixed with a pinning element. So let me show you what we're going to create today.

So as I scroll down, you can see we have three tabs there, and once they all come into view, it pins. And then the first tab goes up to the top, and then the second one goes up to the top like so, which is really cool. And then you go down, and you get this effect and so on. So the main focus for today's video, I think, is going to be these three tabs, and then I will also show you how to continue to the next section. It does get a little bit confusing because the way I do this today is I add this section inside of the pin. So we have to add some values to compensate for the offset. It sounds confusing, but you'll see what I mean in the video.

But less rambling, and let's get straight into this.

Okay, so I've just gone ahead and set up a page called "Life at Spotify," and I've just opened this in Oxygen already. So first, let's create our hero section. So all I'm going to do for that is use a section. I'll change the size here to 100 viewport height and give this a background. Actually, let's use a gradient. So two colors, and I'm just going to grab the colors over here using my Color Picker tool.

Okay, and then next, let's just add some text here, and then I'm going to add a button as well, all in the center. And edit my plus over here for this to Hero. I like to be organized here.

Cool, so that's it for the hero. So what I want to do next is, as we scroll down, we want to have a container which contains three of our tabs, and I also want this to pin. So what I'm going to do for that is create a new div, which we'll use as our pin. So make sure this is all outside. So I'm going to call this "tabs-container-pin," just so it's easy for me to see what's going on here. I'm also going to change the ID of this to "tabs-pin" so we can target this easily in Motion Page.

And then inside this, we want to create our actual tabs. So I'm going to go ahead here and add another div and call this "tab-1." I'm also going to change the ID of this as well, once again to "tab-1." I want to make sure this is full width, so I'm just going to add a utility class here, "full-width." I'm going to add another unique class called "MP-tab" (Motion Page Tab), and we'll apply this to every tab just so we can apply some styling to this, which will be used across all three. And in here, let's just do a background of this color. I also want to control the size in here, so this is going to be a height of 100 viewport height and also minimum height as well. I want to also give the tabs a border. So the border is going to be a little bit darker. Let's just do this for now, solid, and also on the top left, I want to give these individual radii, 20 pixels each.

So inside of tab-1, what I want to do is I want to add a kind of a title section and give it a set height so that we can use this set height in Motion Page to control everything. So what I'm going to do is inside here, I'm going to add another div. It's going to be called "title" with a set height. Now, once again, I want to give this full width, so let's do "full-width" like that. I will add some padding here. So I'm going to do "padding-S" on the ID. I just want to make sure everything is middle-aligned so everything's kind of in the center here. And then the most important part is here, height. I want to give it 120, and I'm also going to set it to the max height as well. I don't want it to ever go beyond that. Under there, I'm going to add another div, and this is going to be our main content for the tab.

Once again, full width, whoops, full width, and then I'm just going to let the height be auto. But for now, let's go back here. I'm going to add another div, which is going to be kind of our wrapper. So "title-wrapper," and in here, this wants to be set horizontal middle-aligned center. And then we're going to add an icon and then the main title in this. So in here, let's add a heading for this. I'm just going to do "One." I want to give this a set width and height of 50 pixels because what I'm going to do is I'm going to add a border to this. So let's also make sure this is center-aligned like that and then borders. Let's just use the dark color here. Width of one pixel, solid, border radius 50%. Typography, font weight 600, and then line height, I'm going to change this to 1.3 just so it kind of sits more in the middle like that.

Next, I'm going to add another. So let's just make sure we've got a small gap on here. "X-S," "Who We Are." Let's do "dot dot," and I think that's going to be it for my title section here. So I'm going to save this, and then let's go down to content, and now let's add some content to this tab. Now, just to make sure that everything is kind of in line, I still want my padding here, which comes with sections, so I'm just going to add a section to this like so. And then within my section, I'm going to add a grid. So let's just do "div," and I'm going to use the utility class of "C-columns 1-2 Gap M." I also want to stretch everything so now you'll see if I add a div and duplicate that div and if I add a height to this div, for example, 350, you'll see that this one also stretches along with it. So in this one, I wanted to add an image. So let's add an image. I'm going to use this one from the Spotify website. And then all I'm going to do to this is just add some rounded borders like that

. Nothing too crazy.

So I'm going to call this "left." I'm going to call this "grid" and call this "right." Okay, then in the right section, I just want to make sure that everything, once again, is middle-aligned. I also want to add some spacing between the header and the text. So let's do "m-M." And then all I'm going to do is add a heading. It's going to be "Who We Are." I'm going to add some text here. I'm going to change the size of this, so text "XL." Also, I want to make that a little bit thinner, so maybe "400." And then I'm going to add this button over here once again.

So now I'm going to duplicate this tab, call this "tab-2." And this is not desirable. What we want to happen is we want this to kind of overlap right on our pin. We first of all need to go to Layout and make sure it's set to "relative." Okay, so once that's set to "relative," tab-1 is actually it's already in the perfect position. What I want to happen is Tab-2 I want to control this on the div. I actually need to change this ID to "tab-2," and then in here on Layouts, we want to make this "absolute" so it's kind of overlapping now. But we want to control this from the top. So remember our title, we gave this a set height of 120 pixels, which means we can use that value to push it down 120, so it just starts on this line here. So that's what I'm going to do, and as you can see, it's pushed that down. So if I just rename this to number two, "Where We Belong," and then we can do the same once again when we duplicate this one, we'll do "tab-3" and Layout, and we'll just double this value once again to 240. Excuse me, number three, "How We Act."

So I've noticed one thing, the border is not so pronounced. So I'm just going to try and change that. And I've just noticed also that the background itself on the tabs is not white enough for me. So I'm just going to change this to pure white. Okay, I'm going to save this, see what it looks like on the front. Okay, it looks pretty good. Cool. So what I'm going to do now is try to edit these in Motion Page, and let's see what we can do. Motion Page, okay.

So I'm going to create a new timeline here, and this is going to be called "Life at Spotify," and let's open up our newly created page here. So once again, all of this wants to happen. The animations want to take place when we scroll. So let's go here to "scroll trigger," "Lock to scroll bar," the delay I'm going to turn down to 0.2. We do have a pinned element. Let's just go grab that ID. So that's this one here, "tabs-pin," so make sure we select that. Now we want this to start, if you remember, we have three tabs. Each size from the get-go is going to be 120 each. So 120 times 3, we need to offset our start trigger here. So what we'll do is when the pin element's top reaches 100 percent, now that's going to put this to the bottom, which we don't want. We want to offset this by 360 pixels. So what we can do is click on this icon here. We can add an offset, use pixels, and add 360. Now this is working well. You can see that it started to pin here. But what I've noticed is we do have an issue with the hero section here. So I'm going to go back to Oxygen, and we're going to need to make sure that this is fixed. So just make sure this is a fixed element. And now what we can do is on this pin layout, in this box here, just make sure we push it down by 100 viewport height. So now we get this effect going on. Okay, make sure that's saved. All right, that's perfect. So as you can see now, I'm scrolling down. It's going to start pinning using our offsets by 360 pixels, which is the total of these three sizes combined. And then what we can do is add some animations for each tab.

Okay, before that though, we want to make sure this is also set to "pin element's top." And then give this a negative value. I'm going to use minus 200 percent just for now. We can always change this later if we want to make it slower or faster. So what I'm going to target first is our first tab. So we'll call our first tab "tab-hyphen-one." As you can see, that's highlighting there. First of all, what we want to happen is we don't want to change anything from the starting position. It's perfect. But two, once this is pinning, we want to control just the first tab's location, basically, the translate on the y-axis. We want to move it up, essentially. So I'm going to go to "custom." I'm going to use "transform," and for the value, I'm going to do "Translate Y," and I want this to move up 100 viewport height.

But you'll notice a small problem here because it's already starting. It's starting here. So if this position is zero, then it's going to do minus 100 from that position, which obviously we don't want. So what we're going to need to do is use a "calc" in here. So "Translate Y," and then I'm going to do "calc." This also wants to be in parentheses like this. It's going to be minus 100 viewport height minus, and then we need to grab the total of this, and we know that's going to be 120 times 3, so 360 pixels, and obviously, this wants to be plus. Sorry, not minus. Now you can see we're having a slight issue here.

Now what I've done already is I've put this to "None" instead of "default," and also what I'm going to need to do is up here where it says "add spacing," I'm going to change this to "padding," and that will allow it to go to the top properly. And then all we need to do is just duplicate this and instead of targeting "tab one" this time, we'll do "tab two." So now you can see the tab here is actually stopping right at the top, which is where we want it, and they're all going to follow along. If they've got the same value here, they're all going to maintain their original positions here, except they're just going to move up instead. And then for this one, same again, duplicate, and all I'm going to do is target "tab number three."

So that's basically what we want right there. Now that is a little bit fast for my liking, so I think all I'm going to do is just change this to minus 300 just so it scrolls through them a

little bit slower like that. I'm going to save this timeline. I'm just going to see what this looks like on the front. So I'm scrolling down. You see the pin happening here, that stops right at the top perfectly. Now it is under the admin bar. Great, that's perfect. Next, let's add another section.

Now the section underneath this, I'm actually going to add to the pin element here. So add section. I'm just going to call this "final section." Now what I'm going to do for this is just going to give this a background color so you can see what's happening. Now in Oxygen Builder, this looks absolutely fine because the elements, obviously, they've not translated yet on the y-axis. But you'll see on the front, we might have a small issue here.

Now if I go back to the top, refresh, you'll see that we have a huge gap here. Now that's because all of these elements have translated on the y-axis, producing this gap here. So all we'll need to do is on this section now because this is a section, I can't actually change the margin in here. So I'm just going to go to custom CSS, and I'll add it in here. So "margin top" and I'm going to do minus 400 pixels just to see what that looks like on the front end. So you can see that's pretty close. We just have like a one pixel gap in there. So I'm just going to change that to 401, and then we can manipulate this section as well. So once again, height, 100 viewport height. And then I think that's pretty much it. We'll just add a couple of elements in there. So in here, I'm just going to add some basic elements from Oxy Ninja. So I'm just going to go to the library here and select something that I like.

Okay, so I've just added this basic section here. It's just a pricing thing, and I thought we could use this in our final example. Just make sure it looks good on the front. Perfect. So once again, let's head back over to Motion Page, and I think what I'm going to do for this is instead of using the triggers that we've got here, the best thing to do is use new triggers. It's just set up a new timeline. So that's what I'm going to do here. So I'm just going to do, I'm going to rename this one actually to "tabs" because that's basically what we're doing there. I'm going to add a new timeline. It's also going to be "Life at Spotify," and I'm going to do "price" for this one. Okay, cool.

This also wants to be a scroll trigger animation. Now what I'm going to do for this one is lock to scroll bar, delay, same again, 0.2. This is not going to be a pinned element this time, so no need to worry about that. And then the start and end viewport, I just want to bring them a little bit closer together, maybe around the center, kind of. So let's do 75, 125, something like that. I'll change this to the top as well. And what I want to happen on this page is I just want to control the background color. So it's not going to be "Tab 3"; this is going to be, let's see. So I'm just going to target this ID here, press enter, and then from its current color, and then let's do background color, and we'll just grab kind of a nice blue, royal blue. And then also let's control this text color here as well. So let's add a new node, and then this time, I'm going to target this text. It looks okay here, but on here, I want this to change to white. So let's go ahead and use our scanner here, text block, this one to text color, and let's just do white.

I think I'm also going to change this one to white as well. So I'm going to duplicate this one, and this time, target this headline, and then let's light as well. So save timeline. I was going to see what this looks like on the front. Hopefully, we get a nice transition at the end there. So here's our tabs. Who we are, where we belong, scroll down, and that did not work.

All right, so what's happening here, guys? After a little trial and error, what's happening is our first original pinned element, if you remember, we are starting it on this one, minus 300 percent. So we also need to offset this by around 300. So if I do 300, it's still going to start a little bit too early, as you can see there. So if you add another 100 to allow for the viewport, 400 percent, then what we'll get is it should start just in time there. So if I save this and then have a look on the front, the offset should allow it to work properly like that. So that is what we want. So what I'm going to do is I'm just going to change this text once again. All right, save timeline.

So as you can see, once you start

creating a lot of stuff in Oxygen, sometimes it can get a little bit confusing. And this is why I'm adding these labels here, just to keep things in order. It's a little bit difficult to follow along. Now we want to move to our next section here. We have our tabs here, and then as you can see, we have a little gap here. And then we have our last section with our pricing, which you can see I've already added over here.

So what I'm going to do now is I'm going to add a new section to the pin. So what we need to do here is on our pin, "tabs-pin," I'm going to add another section. This section is going to be our final section, and I'll call this "Pricing," like so. So let's just go inside of here and then add another section. Okay, and let's see what this looks like on the front. So I'm scrolling down, and then we have our tabs, and then we have our final section. And that's going to be our last section on our page, which is what we want. Now I just want to make sure that this section is actually pinned to this container, which I think it is.

Now what we want to do is make sure that this section actually comes into view here. So as we scroll down, this section actually wants to pin to the bottom of this one. So as this goes up, you see that it stops there, and then we have our new section here, which is what we want. So as we scroll down, we have our sections here, our tabs, and then our final section. So next, what we need to do is add some kind of animation for these tabs to make it look a little bit nicer.

Now, this is already pinned, and we have our offset value here, which is what we want. Now, first of all, let's set up some kind of animation for these tabs. Now, what I'm going to do is on our tabs, I'm going to select the tabs that we've got, and we want to add some kind of animation. Now, we want to make sure that this only happens once this pins. So what we're going to do is use the "Appear on Scroll Trigger." I'm just going to show you that we need to make sure that this is placed exactly where we want. So let's just move this a little bit to the left, maybe up a little bit.

Now what we want to do is make sure this triggers the "Appear on Scroll Trigger" as it scrolls into view. So I'm going to add an animation. Now, if you remember, these tabs are going to start pinning when this reaches 100 percent. So as this reaches 100 percent, we want to start the trigger. So I'm going to do "Lock to scroll bar," and this one I'm going to change to 100 percent. The offset for the animation, we don't want any offset, so I'm just going to leave that as 0.

And then what we can do is add an offset. Now, if you remember, the total offset is 360. So what we want to do here is make sure that the offset is only half of that because the tabs are going to appear in the middle. So this is 180, so 360 divided by 2 is 180. So that's the offset we want to use here. So let's just add an offset and then do 180, like so. Now this is going to start as this comes into view. And then what we can do is also change the duration. I'm going to put this at 0.5 just so it appears nicely like that.

So we want to do this for each of these tabs. So select tab number 2, add the same "Appear on Scroll Trigger." Make sure it's placed correctly, and then add the same settings here. So 100 percent, offset 180, duration 0.5. Then for our last tab, same again, "Appear on Scroll Trigger." Place it correctly, and then 100 percent, offset 180, and duration 0.5. So now, when we scroll down, you should see that as we hit 100 percent, these tabs start to appear like so.

Now, they're appearing a little bit too early. So what we want to do is also make sure that this animation starts at 100 percent. So 100 percent is when these tabs start to appear. Now what we can do here is just change the offset to 100 because we want these to appear as this hits 100 percent, which is the same time as when this pins. So now when we scroll down, you should see that as we hit 100 percent, these tabs start to appear like so, which is perfect. And then they appear nicely as this pins, and then we have our final section here.

Now, there's one issue here, and that is as we scroll down, this actually appears as well. So what we want to do is make sure that this section does not appear until this section starts pinning. So what we're going to need to do is make sure this has a delay. So I'm going to go into the final section here, and what I'm going to do is add a "Scroll Trigger" to this section. I'm going to call this "Final Section Scroll Trigger." And then what I want to do is add a delay to this. Now, we want to make sure that this has the same delay as when this pins.

Now, if you remember, the delay is set to 0.2 seconds. So what we can do here is on this scroll trigger, we can add a delay, and we can set this to 0.2 seconds. So now when we scroll down, you should see that this section does not appear until this section starts pinning. So it's a nice smooth transition, like so. And then as this section pins, this section comes into view, and then we have our final section, like that. So that's the basic setup for this stacking and pinning effect with tabs on a webpage.

Okay, so that's it for this tutorial. I hope you found it helpful in creating this stacking and pinning effect with tabs on a webpage. If you have any questions or need further assistance, feel free to ask in the comments below. And as always, if you enjoyed this tutorial, don't forget to like and subscribe to our channel for more web design and development tutorials. Thanks for watching, and I'll see you in the next video.