Let's jump inside and create animation for the room combination screen. So once again, jump into the design part, hold Alt and duplicate it down below. So place it right here. And what we want right here is to move this to the right. So jump inside, locate the card one and card to simply select both of them and move them right here. And what we also want is to move this background image a bit.

So somewhere like here, maybe. And what you're going to see, right here is a slight animation when you jump back and forward. So jump into the prototyping phase. And what you want is to click right here, drag down below trigger is drag, auto animate and easing you can use ease out. So how that looks like click right here. So before we do, let's just locate it back to here.

So drag auto animate and go notion is out. And now we can hit preview. So when the preview screen opened up, here is how that looks like. So you can see we have this nice background animation of this image. So you can imagine if you have more cards right here, so if you have three or four, for example, you can then move the image a bit less to the left. And then this whole animation will look a lot nicer and a lot cleaner than it is now.

So just imagine you have three or four more cards and the image is a lot wider, and then you can show a lot more details. Now because these are free images I took from unsplash.com before the client has their own images already. Just imagine all of these items to be positioned perfectly. So in this first card, let's say they're selling this lamp, and when you move on on this second card, let's say they're selling this frame, on the third card, let's say they're selling stuff lamp or something like that. So wherever user moves these cards, those items will appear and then can simply then hit on some of these items and then open the dedicated pages for those particular products. So it's really a powerful weapon that you have right here inside of Adobe XD that you can explore and then move around.

And finally what we want for this screen is to choose this image let's say or click on the Paris maybe and then drag it to this screen what we want a step. We don't want auto animate on transition and we want dissolve is out. So once again how that looks like hit play. And you can move these around and when you want to select this hit on the name and it will take you here. Now just imagine that this was the chair and not the couch because once again, we are using free images, and client has not yet provided their own images. But once they do, and once we entered the finishing stages of this project, everything will work a lot more seamlessly and look a lot nicer than it is now.

So I'll see you in the next video when we're going to start with selected item screens. And we are going to add some subtle animation to this background and this chair. So I'll see you there