Create animations within the same artboard with Auto-Animate

- [Instructor] Now let's talk about one of my favorite features, animations. Up until now in XD, you could only go from one artboard to another as a transition. Now, thanks to the power of Auto-Animate, you can animate elements within the same artboard. This was one of the most requested features in XD for a long time, so let's see how that works. Here I have this artboard, I'm calling it Start. And I have a simple button that, my goal here is, as soon as I click here, I want this button to grow and occupy the entire screen.

To do that, all you gotta do is select this artboard, duplicate, so I have an end artboard here. It doesn't have to be named that. It can have any name you want. And I have this same element with the same layer name on both artboards. With that, I can create the final scenario that I want here, the end state that I want here. And now, if I go to Prototype mode, you follow the same process, so I'll go from this one to this scenario as a Tap.

But the transition, instead of being a regular transition, the old transition from one artboard to another, we're gonna pick Auto-Animate. And I'll do the same thing here to go back to the initial artboard, Auto-Animate. So what's gonna happen here is, XD will look for this element. It knows that this element is the same element here, but it's modified, but it has the same name. And it will create that interaction, that animation, for us.

So I click here, the button grows and occupies the entire screen. I made that connection here, so it will take me back. So now, you can create interactions with animations that take place within the same artboard, amazing. Let's learn more about that feature. So now I have this Tap scenario. And what I want is, I wanna click here, and as you can see, I have a group here that has two cards. So as soon as I click there, what I want is to move to this scenario.

So let me undo that, and it's the same process. I will duplicate this and, in this case, let's modify the design a little bit. So this is gonna be that blue, it's actually the transparency, this is 30%, and this should go here. I'm just using the same elements, but I'm modifying where they are in terms of property. So I'm changing the X, and in this case, opacity as well. And I'll call this End, End artboard.

Now, let's go to Prototype mode, and as soon as I tap here, I wanna go to this artboard. And it's gonna be a Tap, we're gonna use Auto-Animate. And if I click on this one, I'll go back to the initial artboard, also with the power of Auto-Animate. So now, I have that amazing interaction and XD's doing all the hard work to create the frames to get me from point A to point B, and it looks pretty nice. Auto-Animate, very, very powerful.

Here's another example, I have a start and an end scenario here, and here I have this rectangle that's here as well, but it's bigger. And this guy is down here on the second scenario. You can see it's here, so this card moves down. It's the same card, just duplicated, it moves down. And these elements, they change to occupy the entire screen. So if I click here now and I go to this one, with the power of Auto-Animate, and if I click back here, I'll go back to the initial one.

If I test this now, look how powerful and nice this transition looks, very, very, powerful.