Let's now jump in and create some animations for the order details screen before I do Ctrl S, just so that I can save our project. So what I want is to jump into the Design tab, hold my Alt key and make two copies. So like this, and maybe you can locate where this one was, if you can align it with it like so. And so create one more copy down below, like so make sure they are the same height. And for this one, what we want is to select card to card three, and align them to the top with the card one like so. And the card one, we're going to hide it so it's not going to be visible.

And we want to update the order detail because we removed it from cart. So what I want is to locate my calculator and it's to four to nine plus 98 and it's going to be two five to seven now. So like this to five to seven, because the price updated because we removed one item from the cart. So what we want right here is to remove this awful house chair from from here. So I simply want to remove it like so, and double click zero on my keyboard to lower the opacity to zero. And what I want right now is to try and animate them.

So I will go to prototype. I will click on this cart, drag it down to here. And what I want is drag auto animate easing, ease ease out. And let's see how that looks like. So hit play. Drag it like so.

And as you can see it removed it from this screen. Now what we want from this screen to down is we want to animate the entire screen. So just click on the name of Dr. Ort, click right here, drag it down. What we want is time, because when we dragged it right here, we want to wait a bit, and then go right here to this screen. So delay, what we want is maybe one second. Auto animate is the action is out is the easing duration is 0.3 seconds.

And finally, what we want is click right here proceed to payment. Go to this screen, so tap, because the background is the same. We want to use the tap, auto animate maybe, and payment and just let's see how that looks like. So click on this first one click play. So when I removed it, let go. It will wait one second and then move these two up into position.

And as you can see total has updated as well. So just hit play one more time, see how that looks like. So pay attention to the total is 2651. And when I click right here, and as you can see, total updated right here and now we have just these two items in the cart. One more thing, we could designed this function so when you click on the arrow, and you can choose so for example, two pieces, four pieces, five pieces, something like that, the price will update right here in the total. But we're not going to do this because the client was more interested about how this is going to work.

So once again, click right here, hit play. And as you can see, drag, remove them total updated, proceed to payment. And as you can see, we are now on the payment screen. And let's quickly just make the adjustments on the payment screen as well. So click right here and move Maybe we want to jump into the Design tab and make a quick copy. So move it down below like so, because what we want is to remove these drop shadows from the first screen.

So on the credit card, you can choose BG and simply hide the shadow to the same for the PayPal. So car BG remove the shadow. And right here on the second one, we want to remove the shadow from the people because the client wants to pay by the card. So here's what that looks like prototype. Once you're here, you can select the arrow and go back here. So tap instead of auto animate, we will choose transition instead of the dissolve slide, right because we want to go back to this screen and what we want so we want to update the total.

But maybe we want them to go either give them the option to go from this screen or to go from this third screen. So in case or if you choose to go from From the start screen and just have two items, you want to update the price, but I just want to make him like so. So maybe I can click right here, drag it from here, tap, auto animate is out, so that's fine. And finally, we want to choose the cart. And then jump back to here and discard the selected, make a payment. And what we want is for them to go back to the home screen, for example.

So it's going to be a transition dissolve is out and duration is going to be one second because we want to wait a bit before we do that. And finally, one final change is to this button, because they cannot select it before they selected their payment method. So it's going to look the same as these other buttons that we designed before. So finally, let's see how our admission looks like so let's jump in from order. Details click right here to hit play, proceed to payment. We are here so the price is the same.

As you can see, they cannot click Make a Payment before they make a selection. So when you click right here, this background shadow will appear. And now they can make a payment, they can click right here. And when they paid, it can take them back to the home screen. Now one final thing that we want to do is click right here. You can propose a time trigger between this and this.

So you can create another copy of this screen making go from here to hear using time trigger and then from it back to Homescreen. Using this dissolve selection, and maybe we want to make it a bit bigger, so two seconds, see how that looks like. So when you're here, I can hit play, hit make a payment, and as you can see two seconds takes for it to come. to this screen, so it's really easy. It's really simple. As you can see, just make those changes and just want to quickly check this so is out duration, maybe it's one second and just check that out, see how that looks like.

So when they click on the card, it takes one second for this background shadow to appear. Maybe you can even create a frame around this card, just to indicate a bit better than it's selected. But I think this background shadow works quite well with our overall design. So in the final video, we're going to jump into store locations and the menu and I'm going to show you those bits as well. So I'll see you there