How to Remake a Flag Animation From Wise.com in Motion.page

Hi guys, Luke here with Motion.page back with another simple tutorial today. Recently, I was browsing through wise.com's website, and you'll notice as you scroll down around halfway down the page, we'll see some countries' flags. So it's just below this element here, so I'm going to keep scrolling down, and we have a really cool effect here with these flags, and this is also locked to the scrollbar, as you can see. And I just wanted to show you how you can create this in Motion Page today.

So all this is using is just a container displaying as Flex row. This element right here is just extending or increasing the width, and as a result, it's pushing all of these elements off the screen automatically. And then each flag has a class applied to it, and then we can target that single class in Motion Page and make it rotate as we scroll down. So we'll be using scroll trigger, and also we'll lock it to the scrollbar and then just apply some animations to this class here. And also, this element here will change the dimension, the width specifically. So let's get started.

Pages, alright. So once again, this will be an Oxygen build. I'm going to create our page, so add new. I'm just going to call this 'Countries Animation.' Published this, and what I'm going to do is I'm just going to create a basic page. I'll create two sections, and then in the middle, I'll create our main section that we'll use to animate just so we have some buffer zones for scrolling.

Alright, so I'm just going to use a design set that I created here, Violet, and I'm just going to add some dummy content sections, content. So I'm going to use this one. I'm going to add another one. Let's do, for example, this one, and then in between these two, I'm going to create our main section that we'll be working on today, section, and I'm just going to put that in the middle. Alright, so here I'm going to try and set up our elements which look similar to this. I'm going to use different colors, but it's going to be very similar.

So first, what I want is a div, and this is going to be our main container, as you can see in Oxygen. Obviously, our section has padding and it sets the page width. So let's fix that first because on wise, this is going right up to the edges. So we'll make this full width in Oxygen. So I'll just go here, set this to full width, and we also want to get rid of the padding on both sides. So I'll just get rid of those. I'll set them to zero.

Okay, so our div. I'm just going to rename this so it's easier for me to follow. So this is going to be our 'Flex container,' and this wants to be set to 'horizontal,' and I just want a 'vertical align middle,' everything. I also want to set this to 'full width,' so I'm just gonna go in here and do '100.'

Okay, so in here, we can add our elements. So first, let's set up this element here. So I'm going to add another div for that, and this is going to be our 'Arrow container.' I'm going to give this a minimum width of '30 viewport width' like this, and in here, I want to add an icon. This icon is going to be an arrow. I'm going to use Oxy Ninja 'cause awesome icons here. I'm gonna use this one. I'm gonna make it solid. I'm gonna give this a background color, and also, I want to give this main container a background color as well. I'm going to make this one a little bit darker. I'm going to add some padding to this element, so I'm going to use 'padding XS.' This is an Oxy Ninja class here; it's just um, it uses responsive spacing. And what we need to do next is we need to align this to the right. So on the parents here, the container, make sure I'm back on the ID here. Just make sure that this is also horizontal, and I'm going to put everything to the right like this.

Next, I'm going to resize this icon so it's a little bit bigger. I'm going to make this uh, '200 pixels,' which is pretty big, and then on this one, back to the parent, I'm going to give this right side here a 'border-radius,' so let's go to 'borders,' and then I'm going to do 'edit individual radius,' and top right, I'm going to do 'a thousand pixels,' and bottom right, 'a thousand pixels.' So now we get this nice rounded shape with padding here as well. So that looks pretty good.

So next, what I want to do is add each of the images. So I've already gone ahead and saved these to my install. So I'm just gonna add them here individually. So I'm going to go image or image URL browse. Let's add Europe first. Now, I'm going to make all the changes on the class here. It'll just be easier. So I'm just going to call this class. I'm going to call it 'MP flag,' 'Motion Page flag,' like this. So on this class, I want to give them each a height of 260 pixels.

Before I continue, I want to go back to the parents here and just add a small gap. So I'm just going to use a utility class here and use 'Gap s c columns,' 'Gap s' will add a small gap like that. And then what we can do is just duplicate this four more times and then change each country. The next one is India, and then America here, and there is one more, so we'll duplicate that one more time. Add South Korea here.

Okay, so I'm going to save this and just check the front real quick. Motion page. All right, that looks pretty good. So now I think this is ready for motion page, so let's open up motion page and edit these elements.

Okay, so I'm going to create a new timeline here, and this timeline is just going to be called 'country flags.' I'm going to select our newly created page. Okay, scroll down. So now we can see the elements. So what we'll need to do first is make this scroll trigger. We want to lock this to the scrollbar because if you remember, as we scroll up and down, it's locked to the scrollbar. I want to get rid of the delay. I don't want any delay on this. I want it to be quite snappy. We're not pinning any elements, so that's okay. And I think that these default values actually work pretty well, so I want to leave those as they are as well.

Next, let's create our animation. So first, remember, we need two animation nodes because we want to apply a rotation to this, but we also want to extend this width. So let's focus on this element first. So I'm just going to use the selection scanner here to select this, and I'm just going to use the ID for now. I didn't give this a class, but that's okay. The default values are all okay, but as we scroll down, we want it to animate to, and we want to change the dimension. We'll go 'Dimensions width,' and we'll change this to 'viewport width,' and let's give this a value of 70.

So as you can see, nothing's changed. So I'm just going to open up Oxygen, and I'm going to select this element, and instead of using width, what I'm going to do is I'm going to go to 'size and spacing,' and I'm going to use 'Min width' instead. So 'Min width' is going to be 30. I'm going to save this. The Motion Page has refreshed. I'm also going to get rid of this one, and instead, I want to use a custom property, and in here, we'll use 'Min width' again, and then we'll do '70 viewport width' like that, and that will work this time.

Another thing before I forget, you can see it kind of slows down towards the end, and that's because the easing is set to default. So if we set this to 'none,' that will be a much more linear animation. It doesn't slow down anymore.

So next, what we want to do is we'll target the class that we applied to these pictures. So we'll set up a new animation node, and there we will add the rotation. So let's go back here, animation selector. Let's just have a look. It was 'MP-hyphen flag.' We'll do 'full stop hyphen flag.' Make sure you press enter, and we'll just make sure that's working. So you can see it's highlighting the first instance of that class, which is what we need. And then all we need to do, again, 'to,' we'll just change the rotation. Let's try 420 degrees. So you can see now in the editor here, it looks really fast, but on the front end, this will actually look much better, and you can see again, it's slowing down towards the end. And that's just because the easing, once again, we'll just change that to 'none.' I'm going to save this and have a look on the front.

Okay. So this is our home page. We scroll down, and as you can see, as you scroll down, they're rotating off the screen. Now, if you think the rotation is too fast, then you can just play around with this value on the rotation. So, for example, I'll change it to 360. A slightly smaller value will give you a slower rotation, like this. So let's go to the Wise example. There it is, and our example once again. So it looks pretty similar. Obviously, I just need to make this section a little bit taller so that we can actually keep scrolling down. But I think that looks pretty good, and it looks very similar to Wise's example here, just using different colors, obviously.

There you have it, guys. Outro. Just another very basic tutorial today. I thought I'd make that after stumbling upon it on Wise.com's website. I thought it would be a pretty cool tutorial to make, so here it is. I hope you like it. If you liked the video, please give it a thumbs up and subscribe, and we'll be back with more content every Monday. Thank you very much.