 Okay, so now that we've got all of our code in place, our scripts are in place, our UI structures in place, the last thing that we need to do is set up our base animations for our screens. Now the actual animations are going to be controlled by Unity's animation system called Mechanim, okay, and this system will allow us to create an animation setup that is reusable between all of your projects. After you set up this one base animation set for the screens, you will not have to recreate this at all for any other project that you create. The only thing that you have to do, right, is add on the extra animation that you want, but you can utilize this these base animations that we're about to set up by using what they call an override controller inside of Unity. So let's take a look at how to do all that inside of Unity. All right, so here we are, this is where we left off. We've got the fader all set up, so just to prove that I'm going to hit play, and you can see that we fade in nicely. Very nice, very nice. Okay, so let's go ahead now and set up some animation. So I'm going to create a new folder in the art folder here, and I'm going to call this the animation folder. All right, and now the first thing that we want to do, okay, is set up or create an animator controller. Not an override yet, just yet, but an animator controller. And what I'm going to do is call this the IP base screen controller, okay? And with that, that is the base controller. We'll be able to actually extend that controller by using an override by creating one of these animator override controllers, but we have to set this one up first, okay? So the process to do this, and I'm going to actually turn off the register screen, turn on the login screen, turn off this fader here, all right? And the process for setting up this controller is quite simple, but what we need to do is assign this controller first to the UI screen, but you'll notice that the UI screen doesn't have the animator or canvas group script attached to it. Well, that's weird because, well, we went and told the UI screen that it should have an animator and canvas group. Well, the reason why that happened is because I assigned the script to the screen before I told it to require that. So all we need to do is remove it, right, and reassign it. So let's just reassign that, and bam, now we have the animator. Let's do that for the registration screen as well. So we will say UI screen, okay? Perfect. And the login screen still has its image, so I don't need that on there anymore. All right, so that is the perfect setup. So now we have the animator attached to this because we required it inside of our script, okay? So from here on out, anytime the script gets attached to a screen or a panel inside of a UI system, it'll automatically attach the canvas group and an animator, okay? So let's move on and actually set up our animator controller. So I'm going to drag our animator to the animator component, set up the controller, and now if we actually go to the animator editor over here, and if you don't see that, you can go to window and you can go to animator, okay? And that'll show you this panel right over here. So you can see when we pop this open, we have a couple states that we start with. We have the any state event, we have the exit event, and we have the entry event. So for our particular purposes, we are just going to focus on this entry, okay? So I'll just put those guys off to the side because we're not going to do that. I will be making a mechanism course here fairly soon, but I just want to focus on the basics here. So what do we do now? So I'm going to select the login screen, and you can see that inside of the animation panel, and again, if you don't have this open, you can just go to window and open up the animation panel, okay? So inside of the animation panel, it says to begin animating login screen, that is the login screen, we need to create an animation clip. So we want to actually create three animation clips. So I'm going to say create, all right, and I'm going to call this the IP base screen idle, all right? So that's going to be our idle animation. This is where the screens will hang out and be invisible, okay? And you can't interact with them. And then I want another one. So instead of, because we don't have that option anymore in the animation panel here, we can actually create a new clip by hitting this drop down. So I'm going to create a new clip, and I'm going to call this the show animation. So this is what we do when we show the clip, okay? And then finally, I want to create a new clip, and we're going to call this hide, all right? There we go. So now that we have these three animations, what I want to do is I want to set up a state machine basically between these. So I want to say when I trigger, so let's go back to our code, right, for our screen. So when I say that I set the trigger, right? So we send in the show trigger for the handle animator. When I set that show trigger, all right, I want to go down to the screen show animation. So how do we do all of that? Well, the first thing that we need is a trigger. So we need to set up a trigger property. So to do that, we're going to come up to the parameters tab. So if you're on layers, just click the parameters tab over here, and select trigger. And we're just going to call this show, because this name right here needs to be the same as the name that you pass in, okay? All right. So now that we've got that, what I can do is create a transition between these two animations. So think of them as states. I'm in the idle state, and then I'm in the show state. I want to transition from idle to show. So I right click on the animation, say make transition, and then drag, and then click on the show. And then I click on the transition, this little arrow right here. And I want to say that there's a condition. There's going to be a reason why I transition. And that reason is because we fired off this show property, this trigger, the show trigger property. So we're going to add a condition. We're going to say when we hit show, we're going to transition down to the show animation. So we need to set up the same thing for the hide. So we need to set a hide trigger, because that's what we put inside of our screen. All right. Now you can always expose these and let people change those, but the whole idea of creating these reusable components, these scripts inside of Unity, is so that you don't have as many properties for people to change, right? So everyone just kind of agrees to a convention, show hide, show hide, right? That's the convention. Hopefully that makes sense. All right. So let's get back. So now, while I'm showing the screen, if I end up triggering the hide property there, I'm going to say make transition, select the transition. I want to trigger this. So on hide, when this trigger event happens, it's going to go from show to hide. And it'll show the hide animation, which we're going to set up here in just a second. So now that we've got that, all I want to do is say when this animation finishes, let's just go back to the idle. And that's easy enough. You can just, oops, you can just go and set up a transition, an empty one. And what it'll do is once it's finished, it'll just go back up. So we don't have to do any setup over here. So super awesome, right? Cool. So there we go. So we got our animation and our state machine all set up for our screens. Okay. So now we just really need to animate this. All right. So I'm going to toggle back over here to the scene view. And let's get our idle setup over here. So in order to start the animation process, what I'm going to do is hit the record button here. I'm going to select the login screen. And what I want to do is set the alpha to zero. It's not interactable. And it doesn't block recasts. And because the idle screen loops, right, we're looping, it'll just sit on those key frames forever until we trigger, until we say go to the show animation. Okay. Perfect. So that super simple, right? Super super simple. So now it's hidden. There's nothing there. Okay. So now what we want to do is go and set up the show. Okay. So what we can do is actually copy the initial key frames. So that's what I'm going to do. I'm just going to drag, select all those key frames, go to the show animation, just set those up, because that's the initial state. And then I would say about two seconds in, I want to fade in. Okay. So I'm going to hit the record button here and then set the alpha to one. We'll make it interactable. And now it blocks recasts. So now we fade in, fade out. All right. And you'll notice that the button actually changes when it gets right there. You notice that little switch when the interactable goes on. So when we show, we should actually just turn on interactable. So the color just stays. Okay. And that's coming from this button. So when we, when we say it's not interactable, it's actually selecting this disabled color. So instead of doing that checkbox down here in the animation, you could always just increase the alpha value as well. But I don't want to do that. I'm just going to say it's, it's interactable from the start. Once we start, once we say we're going to show this, let's just say, Hey, you're interactable. Makes sense. Okay. So there's the show animation. It's perfect. All right. So now what we want to do is do the hide animation. And what we should do is take the final state keyframes from the show animation and put those at the start. So I just did a control C. Now I'm going to do control V. So that's the start of the animation there. So let's record. So about two seconds in, let's fade out. There we go. Let's fade out and turn everything off. And again, for interactable, we can just say you're not interactable. Actually, let's keep it on until we fade out. Yeah, because now you won't see that ugly switch. Perfect. And now we have our animations. Okay. So because we have set all that up, now we can actually reuse this information on the register screen. So let me actually show you how that works by using an override controller. So I'm going to turn on the register screen now. And what I'm going to do is create an animator override controller. And this is going to be the to do app register screen control override. Sorry. All right. And you'll notice that this is a lot different right off the bat. What it's looking for is a controller itself. So I want to give it that base controller. And then you can see that it's looking for new animations. Well, you could provide your own custom hide idle and show animations. But in this case, I really just want to use the ones I already set up. So I'm just going to set these guys up. I'm just going to reuse assets I've already made. And this is what speeds up your animation of UI, at least. And then finally, I'm going to assign that override to the animator on the register screen. And now when we go to something like the show, you'll notice that it does the same animation, same keyframes, same everything. So if we were to edit any of these base animations, it would automatically propagate to the register screen or any screen that you have. Okay. That makes it very, very, but very modular and reusable. You can export this out and use this in all your other projects. No problem. And that's because I just want to reemphasize this fact. That's because we're always saying that we have an animator and a canvas group. You'll notice that in the animator or the animations themselves, all we're doing is controlling the canvas group. And because we are requiring a canvas group to be on a UI script or UI screen, we know that that's there. And that's why this whole thing works. We created a modular system where we can reuse base assets and just let designers and artists add the effects that they want on top of it. Okay. So now we have the animations all set up. We are pretty much ready to go to get our interaction going and starting to switch screens. Okay. So in the next video, I'm going to show you how to go back and forth and set up screens that switch. And we'll just go back and forth between the login screen and the register screen. All right. Thanks so much.