Let's jump right to it. Here we are in our content Metroidvania widgets folder. Let's double click on w BP be magic menu so that we can create an animation for this. Currently my animation section is kind of squished down here. I'm just gonna lift this up because we are going to be creating a brand new animation. I'm gonna click right here to zoom to fit my Blackmagic menu.

And in our lower left hand corner, where we've got the animations panel, I'm going to click this green button to add an animation and we will call this be magic menu. Intro Okay, so we're going to have one animation here, in which we will be animating several things. So first, I'm going to make sure I select my animation here. And you can see now I've got a timeline over here on the right side too. deal with. The first thing I want to animate is our B magic Grid Panel.

That's this grid panel right here be magic Grid Panel. Now before I start to animate this over time, I am going to change some of the defaults. In this case, I'm going to change its scale default. We currently have these values all set so we can see what our final menu is going to look like. Down here in the Details panel, scroll down until you find your render transform scale settings. And I'm going to change the x and y of this now to be zero in the X and zero in the Y.

So it's going to temporarily be invisible if you will squash down infinitely. And I'm going to click right here under render transform scale to add keys for this down to our timeline. And there we see it down here. Be magic Grid Panel transform, let's expand out our scale settings. And we can see that we've got a couple keyframes The zero second mark for x&y value 00. Okay, let's move our timeline slider over to the point one five second mark.

And again, I am going to hold down Control and mouse wheel in to kind of expand out my track here because point one five seconds is not that far away. And then I'm going to right click and kind of slide my timeline slider over to the right like this. So I'm at point one five seconds, and I'm going to click right here to add some more keyframes for the x and the y. And now I'm going to change my x value here to be 1.5 and my Y value to be 1.5 as well. So just kind of showing you what we're doing here is when we do call this to appear on the screen, this is going to kind of like flare out BAM like that. But then we're going to move this down to the point two five second mark here in our timeline.

I just grabbed this red bar moved it over to point two five second mark, I'm going to add some more scale keys by clicking this little plus button. There are my two keys. And I'm going to change my x to be 1.0 and my y to be 1.0 as well. So now, if I go to the front by clicking right here, and then clicking the play button, you can kind of see what that's gonna look like a really quick animation where it's going to flare out, and then kind of go back to its default size there. Okay, so we got our Grid Panel animation in place. Let's collapse this, I'm going to click right here to collapse as graph.

I'm going to move our timeline slider all the way back to the zero second mark. The next thing that I want to animate over time here is going to be our menu name. Our menu name right up here where it says black magic, you can click on where it says black magic or alternatively, over here in your hierarchy. Okay, and with that Selected comm under your Details panel, I'm going to come under the render transform section. And here to I'm going to set a new default value for my scale, I do want the x to be one, but I'm going to change the y to be zero. So it's gonna squish it on down to the point where you can't see it.

And with that now in place in our timeline at the zero second mark, I'm going to click right over here in the Details panel under scale to add keyframes for this. There, it's been added down to our timeline menu name. Let's expand out our transform section. Let's expand out our scale there are keyframes. So at the zero second mark, we want that now I'm going to move our timeline slider all the way over to the point three five second mark. I'm going to add some more scale keys for this by clicking right here.

There are my keys. The X value, I'm going to keep at one and the y value. I'm going to Keep at zero. Then I'm going to move my timeline slider over to the point six second mark six tenths of a second. I'm going to add some more scale keys by clicking right here. Here, the x is going to be one, but the Y is going to be one as well.

So if I hold down Ctrl, and mouse wheel back, I'm going to squish this timeline together a little bit. So we got this going on reset, actually, our title here is kind of squished together and then over time, it's just going to do that kind of thing. Okay, that's kind of cool. All right, let's collapse this menu name portion of our timeline. We're done with that. Next, let's select our menu underline.

Now we've got a menu underline and we've got a menu underline highlight because I made this video To separate pieces of art, which in hindsight, I would go back and make it one piece of art. In Photoshop or something like this, we're going to have to create two animations because I'm going to slide this in from the side. Because I'm going to slide the menu underline this black sort of ink in from the side, I'm going to have to do the same with the highlight the pink ink splatter, but that shouldn't be too much of a problem. So with our menu underline widget selected over in the Details panel. Let's scroll on to we find the render transform scale section. Not the scale section, the translation sections what we're going to be fiddling with here.

So at the translation section, I've got 00 Let me see I gotta flip my page a notes here. at time zero, we are going to set sorry, the x value You hear to be negative 1000. So off the side of the screen, you can see it's over to the left side of the screen. Okay, so with that as our new default value, we haven't actually added keys down to our timeline here. We've got translation at x negative 1000. Why is still zero.

I'm going to click right here to add keyframes for this. There it appears down in our timeline. Let's expand this out there under our translation we see x value of negative 1000 y value of zero. Let's move our timeline slider over to the point three five second mark right about there. We will add more translation keys clicking right there. And here the Y can remain at zero the x is going to just be zero as well.

So over time that is going to slide in like so. Okay. Now again, that pink one is still out there, which we don't want. So let's add, let's add an animation. for that. Let's collapse our menu, underline, select menu underline highlight here.

With that guy selected, under the render transform section over in the Details panel. Let's set the x translation for that to be negative 1000. Then let's add some keyframes for this. So clicking right here. We now have menu underline highlight added to our timeline. Let's expand out some triangles here.

And at the zero second mark, that is what we want for our X and Y translation. Let's move this to the point three, five second mark. Add some more keys clicking right there. Here I'm just going to change our x to be zero as well. So with all of these in place, let me zoom to fit up here. Let's move Our timeline slider all the way back to the front, I can click right here to go back to the front.

And if I click play, that's kind of how it's gonna look. Now you'll notice that I'm only animating the title and this middle part, not these parts over in the upper right. And the reason I'm not going to be animating those onto the screen is because our HUD has those elements on the screen. So when we summon this on the screen, I essentially want these to be in place right where the HUD has them in place. So I really only care about animating these things over on the left hand side. Okay, with that done, you should always compile save.

We are good to go on this one guys. We will see you in the next video where we start to script our black magic menu. See you there.