Now finally, let's animate store locations and menu screens. But before we do, I just realized something. And this is going to happen a lot when you're designing. Sometimes you include things which are not necessary for some screens or some pages if you're doing website design. And in our case, it's this icon. So it's the orders icon inside of order details.

Because why would you need order icon inside of order details because you are on that screen, so this icon doesn't do anything. So let's jump into the design part, hit Delete. And we're going to do the same for all of these other screens. And I'm going to jump inside and delete it for the design part as well. So click right here, delete it from here. And finally jump inside the order details in our wireframe and deleted from there as well.

So as you can see, it's quite simple to make these Changes simply jump inside some of these screens and make the changes. But these things are going to happen from time to time because you are working on this project full time, and you dedicated your time and your energy to it. But sometimes you make some of those small mistakes. So now finally, let's make animations for the store locations. So let's say you are going to it from this screen or from any other screen where you have this search icon. It will take you to this particular screen and let's jump inside the design because we want to make three screens.

So let's use our Alt key once again and make a duplicate of it and make a duplicate of it once again. So what we want to do with the first one is to remove some of these items. So we're going to remove the selected color color. We're going to remove the Pat We're going to make this card disappear. So we can hide it like so. And on the second one, instead of search locations, we can type in Belgrade.

And we're going to do the same. So we're going to remove selected color color, Pat and this cart right here, so we can move it from view. And finally, we're going to show everything on this Start screen. So simply double click right here and type in Belgrade. And make sure you checked if you entered it as a river like so. So we can jump into the prototype.

Now, click right here on this first screen. And what I want is when people click right here inside of this search bar, so on the text, Belgrade will appear. It will wait just a bit and then it will show you all of these, all of this information right here. So when you click on it, you can drag it right here. So tap Auto animate, and then select this entire report. Maybe wait a bit.

So Time, time delay is going to be one second auto animate to this screen right here. And it's going to show you all of this information. So let's quickly jump inside and see what we did. So when you click on this first one, you can click location is going to wait one second. And it's going to show you this store and Belgrade store right here. Now you can make discard pop up.

So for example, maybe we can jump to this screen and jump into design. locate our card, so here it is right here. And maybe we can move it for example down like so. And it's going to be zero obesity. And let's see how that now looks like. So we can jump in, click right here.

Wait a second. And as you can see card appeared from here. Now you can even create one additional screen and then animate this spot. So in the third screen card will appear and pop up from down below like it is right now. But this part is then going to appear in the fourth screen. You can do that if you want to, but I think it looks good for now.

And then the user can click right here and navigate to this location from their own location, or hit more details and learn more about this bill, great store. And maybe that can be like a pop up window and with the black background, for example, so you can black out all of this other information. And you could have maybe another X icon for them to close it if they want to close it from their death card can contain for example, a bit more information maybe images about this place, may be a phone number, email number fax, if they are using fax email addresses stuff like that. And they can contact them directly from there, or they can close and navigate to the store using this button right here. And finally, what's left for us to do is simply click on the menu, use prototype, and then simply animate some of this up.

So when they click on the logo, it will take them to the home screen. So tap, transition dissolve is out. I like that. And finally, maybe we can choose my orders as well. And it will take them to the order details tab, same settings from here, store locations, maybe it can take them to this first screen, so use all the same and I think that's about it. So maybe they can use my payments and go to this screen, but it should be a dedicated screen to my payments where they can see all of their payments.

So when I click right here, hit play, and go to the store locations. You can see where there And when I select it, once again, maybe click on the logo, it can take us here. So when you click the menu icon from here, click right here, it will take you to the home screen. But for example, if you are on this screen, hit play, then hit menu, but we didn't animate it from here. So let's do that right now. Click right here.

Then right here, tap, and overlay dissolve. I think it looks good, but it should slide up. Now slide it down, because that's what we use for all of these other ones. So when you click there, hit play. Hit menu, it's sliding down, as you can see nicely when you click right here. It's going to take you to the home screen Ctrl S to save our project.

And that's it for the animation. As you saw, you can include different types of animations. You can go with easier ones like we did with these arrows which are opening up and You can go for a bit more advanced type of animations, like we do with the wrong combination, where everything slides from left to right from top to bottom, you can even make the image, zoom in a lot closer, you can create a time triggers like we did, for example, for this map, you can animate cards to go from left to right from top to bottom, like we did with this store location. And finally, you can even include all of it together and put everything together to create animations like we did for the orders. When they drag on this first card to the left, then the wait a bit, and everything populates as it should and then updates the price and updates buttons as well.

So that's basically it for the prototyping phase. In the next part of this course, we are going to talk about exporting your designs and how you can send everything you did so far to the client and to their developers, so that they can stop started developing and your client can understand all of your process that you put into place and how the design is going to work once it's coded and once it's live on users devices, so I'll see you there.