Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:6Length:36 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Staggering Animation in Adobe XD

In this lesson, we’ll look at staggering animation in Adobe XD (by which I mean “delaying the timing”, though hopefully the animation will be visually staggering too). This is the first stage of creating a beautiful Adobe XD animation.

2.3 Staggering Animation in Adobe XD

Wow, back for more, okay, in this lesson we're gonna take a look at staggering animation with auto-animate in Adobe XD. So we jump to the screen now, and get started. Okay, so you can see here in the project file, I have two artboards, I've named them Staggering 1 and Staggering 2. We've got a button that says STAGGER ME!, and another button that says YOU GOT IT! So if I work out the layers panel, you can see here if I click on this, we have some text and a rectangle. Now, remember, from the last video, first we need to group these together, so we'll select them both holding Shift, group them, and I'm gonna call this one, Button 1. Now remember, naming of your groups, your layers is very important for XD to work. It looks at one particular art board, and then takes that object name, and then matches it up on the other art board. If the layer names and the folder names don't match, auto-animate won't work. So we've got Button 1, and I'm gonna do the same here. So we group the second button together, and this is going to be Button 2. Fantastic, so, what I want to happen is I want Button 1 to move out and then Button 2 to come in, and then do the same, but the other way around. So Button 2 goes out, then Button 1 comes in. But I want to do this in a staggered way. So first of all, what I'm gonna do is switch over to prototype mode. Now, I'm gonna click on this button, and just link it over here. Now, we'll set the transition to Auto-Animate, of course. I'm gonna go with Ease In-Out, 0.6 on the duration, and then I'm gonna link this button back to the beginning with the same settings. So we've created the link, what we need to do now though is we need to move these around. So I've got Button 1 here, I'm going to go to Edit, Copy, remember, on PC you're gonna right-click and copy that. And then I'm gonna select the second art board, and I'm going to paste it in. Now, what I'm gonna do is hold down Shift on my keyboard and use the down arrow key. So I'm gonna go one, two, three, four, five, six, seven, eight, nine, ten, one, two, three, four, five. Now, the reason I'm using the arrow keys is, because it allows me to move this button a set number of increments. If I drag with my mouse, it's gonna be quite inconsistent between the different buttons. So we've done 15 down arrow presses, I think that's fine. And then on this one here, I'm gonna do the same to select this, click on the other art board, click Edit, Paste, hold Shift and press the up arrow key. One, two, three, four, five, one, two, three, four, five, one, two, three, four, five, so 15 each side. And if I click Play, you'll see that it does this. So I know it's working, which is fantastic. Now, I know it's working, what I can do is I can turn off, or not turn off, but I can select the one I want to fade in and fade out, and I can reduce the opacity from the appearance panel on the right. So remember, these buttons are gonna be in the middle. So because auto-animate detects the changes between art boards, what it's gonna do is, it's gonna start with this one here. Remember, this is the, YOU GOT IT!. And as it starts from here is 0% opacity, and moves over to the second art board, it's gonna move the position down, and bring it to 100% capacity. The same for the purple one here. This is gonna start here in the middle, and it's gonna fade out, and move down. So if I click Play, you can see that the buttons move around, looks pretty cool, right? But the purpose of this lesson is staggering animation, and this is a really cool technique that you can use to just take your auto-animate designs to the next level. So, that looks good, but good isn't enough here. So what I want to happen is, I want the button to come in just a little bit before the text. So the text and the button it sits on, just move a little independently of each other, essentially staggering my animation in stages. So if I double-click here to go inside, of course, it gets quite tricky, now I can't see what I'm doing, so sometimes what you might do is, just do that. Bring the opacity back up, make the changes, and then turn it down again. So I'm gonna double-click to go inside. So that text, hold Shift and press up, one, two, three, four, five, one, two, three, four, five, one, two, three, four, five. So you see the button is gonna come in first, the text is gonna come in just that little bit later, it can just have a really nice effect. So if I go down here as well, I'll just bring the opacity up. Double-click to go inside, and this time hold Shift and press down, one, two, three, four, five, one, two, three, four, five, one, two, three, four, five. And I can click Play to check it works. There we go, it looks a bit weird, but it works. But now what I need to do is, just select that group, and then bring the opacity all the way to 0. And then if I click Play. You'll see here, there's that slight staggering on the animation where the button itself comes in and goes out just before the text arrives there. And there we go, there's a look at staggering animation in Adobe XD, I hope you enjoyed this, and I'll see you in the next lesson.

Back to the top
Course source files