Create an Awesome Rounded Carousel using MotionPath on ScrollTrigger - GSAP/Motion.page 🔥

Hello guys, welcome back to the channel. My name is Luke, and in today's video, it's going to be a little bit more advanced, but we're going to be creating something which was requested in our community by one of our clients. They were wondering if we could create kind of like a carousel which, when you scroll down the page, it animates on a kind of like a half circle. Now to better explain this, I'll just show you the example that they posted. So this was the website that they posted, and if I scroll down here, you'll notice a really cool effect. Now when I checked the inspect, it looks like each one of these pictures is contained within a link that link is being animated using a transform. The cool thing about this is it's animating on the X and Y AXIS. So if you, for example, focus on the green one here, you'll notice that it's obviously going to the left but it's also going a little bit up on the Y AXIS as well, and not only that, it is also rotating.

In motion page, that's a little bit difficult to achieve. We would need many animation nodes to make it smooth in a circle. Using only two animation nodes would create a triangle effect, which is not desirable. So to iron out that triangle, you'd need, for example, a node here and then a node here, a node here, a node here, and it just becomes very difficult, especially when you have many elements. So I was thinking about this, and turns out we could make this quite easily using the motion path feature, which was recently implemented in motion page. So what we can do is create an SVG, make a path which is a half circle, and then use motion path to attach each element to the path and make it animate along the line.

So the first thing I want to show you is I used this free tool online. Once I created an account, this is free to use. I created this shape here, which is a half circle. Make sure that the fill is set to none. I'm going to leave the stroke in place just so that I can see it in the Builder, but I will edit the SVG code later so that there's no stroke showing. Then all you need to do is export, generate, and then this is going to generate a preview. If I click copy to clipboard, it's going to copy all of the HTML for the SVG to my clipboard, and I can use that in a code block in the Builder of my choice.

Once that's done, you want to head over to your builder. In my case, I'm going to use oxygen Builder. I've just created a section at the top, a middle section, and then a bottom section. I'm going to paste that code, add a code block PHP, and paste that text in there. Apply. So you'll notice here in oxygen, we do need to make this code block full width. I'm going to go ahead and do that. Before I do anything else, I want to make sure this works. So I'm going to go ahead here, add an image of our can. Let's go ahead and add this one first. Now if I put this outside of everything, I'm also going to go ahead and change the width of this to 200. Save. Now let's open up motion page and see if we can get this to animate.

I'm going to create a new timeline. I'm going to call this rounded Carousel. We'll select the page that we've just created. So here's our line, and then here's our image. We want to say scroll trigger. We want to lock this to the scrollbar. We want a pinned element here. And what I'm going to do for this is select our section. So you can see that's pinning. Now what I want to say is when the top of the section reaches the top of the viewport, and then we want it to finish when the top reaches minus 100. So that's going to pin for the height of itself. And then we want to select our image, which is the monster can here, and then let's go down here and select motion path. And then here we want to select our actual SVG. So we'll click on the scanner here, make sure that we select the path. And now you can see we have a slight issue. So when we scroll down, it is animating, but it's kind of going up with the scrollbar, which we don't want. Now this took me ages to figure out, but the reason for this is the image here, it wants to be within our pinned section. So as long as your images are inside the pinned section, we shouldn't get that issue anymore. So as long as anywhere within this section, that should fix itself in motion page. So now you can see it's animating along the line.

So that's what we want. So we know that this is working. So now let's go back to the Builder and clean this up a little bit. So what I'm going to do is I'm going to wrap all of my images in a div, and then what I'm going to do is add all of our images, which is five in total. And then I'm just going to swap these images out. So let's go to this one next. Next, we have the cola, and finally, we have the doctor. And just to make this look a little bit better in the Builder, I'm just going to horizontally align everything like that. I'm going to hide these for now, and I'm going to improve this a little bit here. So let's change the background first of all, something like this. And if I visualize this, we want a logo at the top. So let's just go ahead and vertically align everything and center. Next, I want this to be full width because I want this SVG to actually go off the page a little bit. So I'm also going to go to the code block here and change the width of this to 12 20 viewport width, just so it goes off screen a little bit slightly. Next, I want to add a main logo at the top. So let's go ahead and add that. Let's do the main Monster logo. Put this to the very top. Under this, we want two more divs, one with logos for each can, and then under that, we want the titles for each model of can. So let's do a div again. We'll put this under the code block. I'm going to call this logo container. And in here, we want to add our logos. So I want them to overlap each other. So what I'm going to do is make sure that this one is set to relative. And then in here, we want to add our logos. So the first can is this, and the related logo is this one here. Now I don't want to change anything on this one. I'm going to duplicate it. But on this one, I want to add position absolute. And once again, the reason we don't change this to Absolute is so that there's always the height in place. So let's go ahead, change this image. The next can is going to be Monster Ultra Paradise, which is this one. And then I'm going to duplicate this three more times and change the images. Okay, so the next one is the normal zero sugar. This one is going to be Cola, so this is going to use the normal Monster logo. And then finally is our doctor, this one. All right, so there's the logos. They're overlapping each other, which is good. And then the last thing to do is add another div. So we'll go to the section, add a div. And this is the same principle here. So we'll do title container. This once again wants to be relative. And then in here, we want to add some text. So I'm going to use heading. I'm going to change the tag to header to. Before I change anything, I'm going to change typography to be center aligned. I also want it to have a white color, something like this. We'll change the font family to something that looks nice in Japanese because we're going to use Japanese text here. And let's go to the monster page here. And the first can was Monster Energy, this one. So I'm just going to copy this text here, Monster Energy Zero sugar. Now this is all in Japanese because I'm living in Japan, so I'm getting the Japanese version of the website here. And then let's go here, we'll add the Japanese text. And once again, we don't want to change this to Absolute, but we do want to change the next one to be positioned absolutely. Layout absolute, so it overlaps. And then let's get the next text, which is Monster Ultra paradise. And then make sure you selected the second heading there, and we'll paste that in here. And then let's duplicate this three more times. Three, okay, this one is going to be the normal Ultra. Copy this, paste that into the third one, Ultra. Go to the fourth, this is going to be Monster Energy. Copy and paste. And then finally is going to be the special edition. Select this text, ctrl C, and ctrl V. All right, so that's that. We'll save this. And now let's just tidy some things up here. So what I'm going to do first is make sure there's some margin at the top of this. So there's some space between the logo. And also, the can is going to be scrolling across here, so it's going to cover up the logo, which we don't want. So let's just make sure that this has some margin at the top. Let's say 12 REM, quite spacious. And let's just go back here, we'll save this. And then let's go ahead and we'll unhide this one. And we'll go to motion page and just refresh this. All right, so now you can see we have all of our pictures here. So what I'm going to do now is I'm going to click, right-click here, edit. And I'm going to add all of our images together. So in oxygen, it might actually be better if I just rename these IDs so it's easier. So let's go back here and we'll rename these. So we'll do MP for motion page, can one. This one is going to be can two, can three, can 4, and can five. All right, so we save this one. Back to motion page, now nothing's going to work because we've just given this a new ID. So all I'm going to do is we'll add every single ID in here. So we'll do one, two, three, make sure you also have this one for the ID, 3, 4, and five. And get rid of the comma there, and then press enter. So now you can see every single can is moving at the same time. Now the gap here is a little bit big, so let's just go ahead and remove that. We'll make the margin here a little bit smaller, six [Music] REM. All right, let's have a look. So it's a little bit better. We can see it at least a little bit. Still a little bit big, though. So I think I'm going to reduce that even more to three. Oh, of course, it's because this div is taking up the space. Sorry about that. So what I'm going to do is on this section, I'll just do relative on this section. And then I'm going to make this div become absolute just so that we get rid of all of that space. So if I go to layout here and go to Absolute in motion page, that should get rid of the huge space. I refresh this, yeah, there we go. So now you can see we're getting something that looks much better now. So now let's try again with the margin spaces. I we'll do, let's try 12 REM once again. I also want this section to have a height of 100 viewport height. And let's say that height is going to be minimum. All right, so save this, try this again, refresh. So now that does look a little bit better. It is still covering the logo there, but I don't think that's too bad. But yeah, that actually looks pretty good. I'm quite happy with that. One thing I want to do is just change the size of this can a little bit. So let's go to motion page here. And then on the not the headings, sorry, the logo container. Now it would probably be better if I applied a class to this. We want to go here, sorry. So this one, I'm going to change the width here to 150 on each one. So 150, we save that, refresh this. All right, so that to me looks much better, actually. So that looks pretty good. Now the next thing we need to do is stop them from animating all at the same time. So all I'm going to do is add a stack. So we'll go to stagger, and then let's say every 0.3 seconds, we want them to animate in like so. But yeah, as you can see, that looks pretty good. I do like the spacing between them. I think that's pretty

good. But if you want the gap to be shorter, you just make this shorter as well, 0.2 for example, so they're a little bit closer together. But yeah, 0.3 I think looks pretty good, so I'm going to stick with that. I think that works quite well.

All right, so the next thing is we want to now control the elements here. All right, so they're a little bit higher here. So go to oxygen, and what I'm going to do is I'm actually going to wrap all of this in a div, and I'm going to put this in the same div and just make sure it's center aligned once again, and then we can control this as one. Then let's do margin minus, let's try minus 180, just so it's a little bit more visible. So I'll refresh this, much better. Yeah, I kind of like that.

So now in oxygen, I'm just going to give these some unique IDs so I can target them easily in motion page. I'm also just going to, before I forget, make sure that this title container, everything is center aligned. Okay, so let's start with the logo container. So our first logo is going to be MP logo one, logo two, logo three, four, and five. And I'm going to do the same with the titles as well. So we'll go here, give this a unique ID of MP, let's call this one title. And I'm just going to go ahead and rename them to 1, 2, 3, and 4. I'll speed up the video here.

All right, so I've just gone ahead and renamed all of these. So this is five, MP title 4, 3, 2, and one. We'll save this one, and let's go back to motion page to work our magic. So refresh this. All right, so what I want to happen first is I want all of them to be invisible. So what I'm going to do is create a new animation node from the very start, and I'm going to make this very short like this. And then what I'm going to do is I'm going to target all of our titles and logos at the same time. So we'll do Title One, let's give this a comma and a space, and we'll copy this. This is going to be two, three, four, and five. We also want to target the logos as well, so we'll do MP logo one, comma. I will copy this as well, 2, 3, 4, 5, 5, 4, and three, hit enter. And this is going to target every single element here. So what I'm going to do is from opacity zero, we also want to do to opacity zero, just so it remains invisible from the start.

All right, so then what we want to do is when this first Monster can reaches around here, we want to add a new animation node. And then what we want to do is target the first title and the first logo only. So we'll do logo one, and we'll also do title one. And we want this to go from the opacity, remember it's set to zero here, so that's fine. And then two, we want the opacity to change to one, and we want it to fade in round about here. I guess here is fine, actually. So that's going to be around 0.3, and it's the same value we applied to the stagger. So as you can see, when I scroll down now, that fades in like so. It might actually be better if that fades in fully when the can's in the middle. So when the can's in the middle, around there, we want it to fade in like that. So it's quite fast, as you can see. And then 0.3 seconds is going to be here. Right, so when the can reaches around this point, this point here, then we want to add a new animation node. This also wants to be very short. And on this one, we want this one to fade out, and then another one to fade in. So we'll set two on this node here. I'm having trouble selecting it. So once again, we could actually, let's just delete these here, delete. And we'll just duplicate this one to make our life much easier. So then once again, here we want to make this zero. But then we want a new animation node, and then we want to target, duplicate this one. We want to target, edit, number two. So on number two, we want this one to fade in, so opacity one. All right, now we might need to play around with these nodes a little bit just to make it a little bit more smooth. But for now, I'm just going to go ahead and do this style for each can. All right, so we'll duplicate this one once again. We'll move this forward on the timeline to around here. There's the first can, the second can, third can. So we want this to become zero. And then we want to duplicate this one, duplicate. And we'll change these values to three, hit enter. And then we want three to fade in like so. Now let's have a quick look. So we have this one, we have this one, and we have this one. So it's looking good so far. So we just follow the same process. So once again, we'll duplicate this one, put it around here. This one wants to be set to three. Make sure that opacity is going to zero. And then we want to duplicate this one here and just change the values to be four, hit enter. And then once again, we'll duplicate this one, move it forward with the same spacing. This wants to change to four. And duplicate this last one here, duplicate. And we'll change these values to five. All right, so if I scroll up, move this down a little bit, let's scroll down. So you can see the first can here, second can, third can, four, and five. Pretty good. We unpin, and then we go down. So far, so good. It's looking nice.

All right, so the next thing I want to do now is change the background. All right, so let's go here. So at this part, we want the background, the section background, to become a slight blue color. All right, so I've already loaded this up so that we can use a nice gradient. So what I'm going to do is first of all, I'm just going to select our, well actually, let's load this on the front end. And what I'm going to do is just use a color picker here. I'm going to select the blue color and copy the hex here. And then I'm going to put it into our generator to get a color. But what I want to do is kind of make it a dark blue. So I'm using the same value, but I'm just going down here to make it a little bit darker. And then what I want to do is copy this value, linear gradient. I also want to make sure that this here is set to zero. That's very important as well. I'm going to copy this value. And then in motion page, I'm going to add a new animation node. And then we want to target our section. And then we want to do custom. Let's say background color. Oh, sorry, it's just background. So we'll change this to just background. And then we'll copy in our new value here. And that is going to be on the two. All right, so now when I scroll down, you can see the background gradient is changing quite nicely there. So that's really cool. And once again, we just want to duplicate this, duplicate. We'll move this forward to the next iteration, which is here. And we'll do the same, duplicate, put it in line with that one. Oops, sorry, put that in line with this one. And then duplicate, finally, and put it in line with this one. And now we just want to select the different colors. Okay, so the next color is going to be our green here. So inspect, not inspect, we want to get this, grab the green. And then once again, over here, we'll just change out this blue color to the green. And then we'll select a slightly darker variation. We'll select this value. And then back in motion page, on here, we'll just change this value to this one. Next one is going to be white. Paste, make sure that's kind of a dark color there. And we'll select this value. Once again, we'll change the third one to the new value. For this one, let's grab the red color. Copy that, put it in here, make this red a darker color like so. Grab this value. Also, make sure there's no semicolons on the end. We don't need the semicolons there. Okay, good. Next, we have the red color, I believe. And then finally, we just need the yellow. So we'll grab the yellow, put it in here like that, make it a dark color like this. Copy once more the value here. I'm going to save the timeline. I'm going to check this on the front. Okay, so I'm going to scroll down using the scrollbar. So it looks like I made a small error here with the red, so I'm just going to fix this real quick. All right, so I've just fixed those colors, and let's just try to see this one more time, working properly. I'm going to scroll down, blue, green, white, red, and yellow. Cool, so that's pretty much it. The last thing we need to do now is just get rid of this stroke. So in oxygen, we'll go to our code block, and then let's go to stroke here, and we'll just set this to be none. Apply, and then save this.

Now on the front, we should have a cool-looking Carousel. So if I scroll down here with the scrollbar, see the cans come in there, and then we unpin, and we continue. So this is how I would go about creating a carousel using this kind of effect. Pretty cool, and it's very nice being able to use the motion path feature. So there you have it, guys, a pretty good tutorial, I think. Very nice effect, a little bit more advanced, but I hope you like it. And if you have any questions or requests, please do reach out to us, and we will see you in the next video. Thank you very much.