2.4 Applying Masks to Auto-Animations
Masking can give you some awesome effects in UI design, and that applies to Adobe XD auto-animate too. In this lesson of our Adobe XD tutorial, we’re going to animate a timer button, using the power of simple masks and a neat transition.
1.Introduction1 lesson, 01:49
2.Using Auto-Animate in Adobe XD5 lessons, 33:57
2.4 Applying Masks to Auto-Animations
Okay, welcome back to the course. In this lesson, we're gonna take a look at animating masks with Auto-Animate in Adobe XD. So we'll jump to the screen now and get started. Okey-dokey, so you can see, I've opened up the project file for animating with masks. And what we're gonna do in this video is do a timer-counter thing. So we have the button here that you've probably seen in previous videos. And we're gonna click the Text tool, and type some text, and I can type a number. I'm gonna press Return, and I'm just going to go, one, two, three, four, five. So this is vertical text, and I'm gonna position this somewhere here. Just zoom in a little bit, to make sure I get that number vertically aligned. And then what I'm gonna do is hold Alt our Option, and just drag some copies out. You can also hold Shift as well, and it just keeps it in line, stops it moving up and down like that. [MUSIC] And there you go, or look at these smart guides, really helpfully, just lines everything up. So this counter is gonna start on 1111, [LAUGH], then I'm gonna select everything, go to Edit > Copy. Remember, if you're on a PC, just go-right click Copy there. And I'm gonna paste this over, onto this second artboard. And if I just look at the Layers panel, we've got Rectangle there, and this one is called Rectangle as well. Remember, those layer names are incredibly important, and we've got these here. Now, at the moment, these layer names are all the same, so I'm gonna need to give these some names. So we'll go column-1, and then I'm just gonna go through and name them accordingly, so they Auto-Animate independently of each other. So we've got column-1, column-2, column-3, column-4. If they're all the same, Auto-Animate is not gonna know which one, and it just won't work, trust me. So name all of your columns independently. Now, I've just named all of these over here. So I'm just gonna need to select all these, Delete or Backspace. And then just copy and paste them back over, so I don't have to go and rename all of these layers. So what I can do now is, if I select this one here, this shape, go to Edit > Copy, Edit > Paste. I'm just gonna move this up out of the way, a little bit, and I'm gonna give this a super bright color. Doesn't matter what color it is, because we will get rid of it in a moment. And I'm going to use this as a mask for the numbers. So what a mask does is, it will keep everything that I have within that mask contained within that shape. So if the box that I'm using, this button shape is the mask, then anything outside of that shape will just be invisible, you won't be able to see it. So if I bring this down, and make sure the mask is on top, I can just call this mask for the time being. And then I'm going to select all of the text layers that I want to be included within that mask, I just right-click. And if you're on Windows, you'll see it here. If you're on a Mac, go up to Object, just look for the option, Mask with Shape, and there we go. So that mask is now called Mask Group 1. I can expand this down, we've still got the mask here. You can, of course, turn this off if you want to preview them. But the bright green shape that we had, that is now a mask. A mask, you can't see it, but it's there, it's acting on the objects or the text layers contained within it. So now, I have these number 1s, but you can see, the mask is still there, even though you can't see it. And you can see it up here in the Layers panel, as well. So I've masked the numbers, we still have our colored rectangle behind it. And I'm just gonna copy and paste this over to here, now. So again, I didn't really need these on here. It's always good to do the kind of setup first. We'll go to Edit > Copy, and then Edit > Paste on the second artboard. You can do them independently, but it's just a slightly smarter way of working to do it, when you've done it up-front. Because you've named all your layers, you don't wanna go and name it, and mask it all again. So that only copied the masked group, so I need to go in here, and just select this object as well. Make sure I copy that layer over to this one, Edit > Paste, and then I just need to drag that underneath. So remember, you can reorganize your layers as well, okay? So now we've done all this, what I can do, so I can double-click to go inside the mask, it kinda functions similarly to a group. And then I can actually select these individual text layers, and move these around. So if I want the number to Auto-Animate to, well, let's have something quite drastic. So 4, we'll have it animate to 5, this next one will go to 2, and then maybe another 4 over here. So you see all of this, all these numbers around the outside, looks quite messy. But remember, we have a mask, so anything outside of the mask shape is gonna be invisible. So it only shows it when you're working inside the mask. As soon as I click outside on the pasteboard here, you can see the mask is reapplied. Now, all of this, I don't know if those numbers are in line. So I'm gonna hover over the top of my artboard, and just drag a guide down, just to make sure everything is in line. And I can double-click, go inside, not too bad, good job done, [LAUGH], good job. So I'm just gonna go back inside, then I can go to View, down to Guides. And I can just Hide All Guides, and we've got a shortcut there, there we go. So I've set everything up now from one artboard to another. The only thing left is the Auto-Animate, so switch over to Prototype Mode. And then what I can do is, well, I could have this animate on a tap, as we've done before, but let's do something different. So I'm gonna click on the artboard itself, I see the same blue tab linked to this artboard. Now, instead of Adobe XD waiting for a tap, we're going to do a time delay. So I can specify a number of seconds, so we'll go with 2 seconds. So this action won't play until two seconds have passed. Of course, the action is, you guessed it, Auto-Animate, and we can set the easing. We'll have, a little wind-up, I think, will look quite nice with this, and the transition will be 0.8 seconds long. And then we'll do the same over here. So we'll select this artboard, link it back, and we'll have the same transition, and this will happen again after 2 seconds. So if I go and click Play now, we wait, [MUSIC] You can see, the counter plays that animation, and then it plays it back again. Okay, so I hope you enjoyed this lesson, there's a look at how you can use Auto-Animate and masks together in Adobe XD. And I will look forward to seeing you in the next lesson.