Animation overview

- [Instructor] Adobe XD allows you to create great animations very easily that you can incorporate into your prototypes. By being able to create animations, you can really bring your ideas and designs to life and showcase exactly how this is going to work or look when it's on the web. We're going to be creating this simple animation as an overview of some of the things that you can do with XD, and as you can see, the various elements are fading, sliding, and popping onto the page. Let's look at how we can create something like this. I've already set up the artboards that we're going to need to create this animation, and as you can see, I have quite a few artboards in my document. I'm showing the progression of the elements that I want to appear and how I want them to appear, and the reason that I need more artboards in this particular example is because many of my triggers are going to happen via time. My first artboard, which is completely blank, is the initial starting point of the screen. Then I'm going to have the Banks Board logo fade in. Quite quickly after that, the image will fade in, and then, we're going to have this tagline slide in from the right-hand side, and then, finally, we're going to have the Learn more button pop onto the stage. So let's look at how we can do this. In order to create animations, you'll need to be in the Prototype mode, so I'm going to switch from Design to Prototype. Screen 1 is set at my home screen, and what that indicates is that that will be the first screen that the animation is going to start from. You can easily switch home screens by simply clicking the artboard and then making sure that the little home icon is set to blue. We want it to be Screen 1, so I'll keep it there. The next thing that I'm going to do is, with the artboard name selected, I'm going to wire up the pointer indicator over to my second screen. Over here in my Interaction area, I'm going to set the trigger to Time, and I'll specify an amount of time that I want. So we'll have this occur in half a second. The action is going to be a Auto-Animate, and the destination is going to be Screen 1-1, and we'll have the easing just be an Ease In, and we'll have the easing occur in .2 seconds. So let's just see what this looks like. In order to test your animations, you're going to click the play button so that you can preview on your desktop, and as you can see, my screen is blank for about half a second, and then, the logo fades in. We're going to do a similar set of steps to get from Screen 1-1 to 1-2. So once again, I'm going to select the name of the artboard. This is the only way you can set the trigger to happen via time. The settings that I set for interaction were remembered from the previous step, so I'm going to have the delay be a little bit longer here. Let's make this a full second, and again, I'm going to use Auto-Animate. I'm going to have my destination be 1-2, and this time, let's use an Ease In-Out, and the duration we'll make .4 seconds. So if you want to preview it, you'll click the play button, and this time, it previewed from the active artboard. So if I want to test from the beginning, I'll have to make sure that the initial artboard is selected or no artboards are selected. Now, I can preview the animation, and you can see that the delay's a little bit longer once the logo comes in and the image appears. We'll speed that up a little bit, so let's change this to .5 seconds to make it half a second. The next step that we're going to do is we're going to make the text slide in. This one's going to be a little bit different. So for this particular step, what I'm going to do is I'm going to have the trigger, once again, be time, so I'll select the artboard. I'm going to draw the pointer indicator to the artboard I want to reference, and then, what we're going to do is we're going to change the settings here. So I want it to be Time. We're going to have this happen very quickly, so I'll change the delay to zero, and instead of using Auto-Animate, I'm going to use Overlay. Overlay means that these elements that are on the Screen 1-2 artboard are going to remain in place while the text is going to slide in. So none of these things will actually move, which is what we want. I'm also going to change the animation from Dissolve to a Slide Left so the text will slide in towards the left edge, and let's change our easing here to Snap so this is a little snappier, and I'm going to have the duration be 1.2 seconds. Let's take a quick peek and see what that looks like. So once again, we'll start from the beginning. The two elements fade in, and then, you can see that the text slides in, and because I'm using the Snap along with Slide Left, you can see that the text kind of slides in, and then, it slowly kind of goes back to the right and gets into place, and I like that type of movement. The next step that we're going to do is we're going to wire up the Screen 1-3, so again, I'm going to select that. My trigger is going to be Time once again, and this time, we're going to drag over here to the Screen 1-4. So by default, when you use Overlay, it goes back to the previous artboard, but we want to progress to our next artboard. I'm going to have the delay be zero seconds as we did before. I'm going back to Transition, and we want to show artboard 1-4, and let's just do a Dissolve and a Ease Out and maybe change this to .2 seconds. So I'll just go back to this screen so we don't have to watch the entire thing. The text slides in, and now, it's just going to hold. So that's what we want right here. We just want to kind of create a hold, so I needed to create this pause so that I could do the final animation. You can think of the artboards as keyframes, so if you've ever done any animation before, you might be familiar with the technique of keyframing. Keyframes are points where something critical changes in what you're doing. So these artboards indicate the keyframes, and then, the application is setting up all those in-between frames. So the final thing that we're going to do here is we're going to wire up Screen 1-4 to 1-5, so I'll point that over to 1-5, and we're going to use Time. We'll just set this to be, like, .2 seconds. I'm going to use the Overlay again because I don't want any of these items to change. I just want this to pop up from the bottom, and we're going to change the animation to a Slide Up. We're going to change our easing to Snap, and I'll have this occur in .4 seconds. So let's see what our final animation looks like. I'm going to click the play to run the prototype, and can see that all of the things that we'd previously done occurred, and then, the little what would ultimately be a button pops into place. So the animation techniques allow you to be very creative and allow you to create a whole 'nother level of interactivity to your prototypes.