By Dani Beaumont
Auto-animate in XD is an incredible feature that allows you to animate individual objects across artboards, creating more robust interactions and transitions in your XD prototypes than ever before. When you wire to artboards together in Prototype mode using auto-animate, XD automatically animates the difference in properties between each artboard. Now, this is definitely a feature that's easier to show than it is to explain, so let's go ahead and jump into a design.
I'm here on the design canvas and what I've done is defined the start state for my animation in this first artboard. The next thing I did was duplicate the artboard and then change each of the elements being really careful to keep the names of all of the layers exactly the same. The rule in XD is if an object has different attributes applied to it — this could be opacity, colour, text attributes, the size of the object, the position of the object — any changes that I made, XD will animate between them any content that is the same will just appear to not change between artboards. If we look at this design there's a couple of subtle things that I do want to point out.
When I click this first artboard, notice that I have an object here that's off the actual artboard. If I bring up the layers panel, I can see that that's the button "Book Tickets". When I come here on the right and click, I see that that same button "Book Tickets" is there. Other things I've done to the design are to take this album cover basically and make it a full-screen background image. I've taken the text here from the top and moved it down towards the bottom. There's also a subtle behaviour where the play button here on the album turns into a pause button to indicate that you're actually playing the music, along with a little bar here that appears to show that that sound is playing. For my auto-animation, I want the behaviour to be such that when you click this album, it brings you to the second artboard. So I'm ready to now wire these two objects together. I'll switch over to Prototype mode and I'm going to select that album cover basically and I'm going to drag a wire the way I ordinarily would and release it on the second artboard. In the Trigger drop-down I'm going to stick with tap as a gesture source. Under Action instead of Transition I'm going to select the new Auto-animate feature and this gives me a different set of options.
I'm going to confirm the destination aIs that second artboard. Under Easing I want to select Snap. So we have new easing that we've not seen before. For the Duration here I'm going to go ahead and set it to be rather long, so 2 seconds. I want to show you exactly how this animation is working. And for this test I'm going to go ahead and select the second artboard and I'll drag a wire from the second artboard back to the first. Notice that XD starting to get more intuitive. It's going to remember the settings I've just set here on the left and suggest them to the second example the second transition. So the defaults are good. I'll leave them as they are. Next, I want to take a look at the work I've done so far. I'm going to go ahead and click this first artboard and bring up the Desktop preview window. As I roll over that little hot spot area I can click and watch how the animation takes place. When I do that and rather slow motion, the image becomes large, the text moves down, this "Book Ticket" button moves from off-screen to on-screen and it fades from 0 to a 100% opacity.
Obviously, I've just touched on this amazingly powerful feature. We can't wait to see what you'll do with these new capabilities. I encourage you to give it a try.
Adobe XD's Auto-Animate functionality unlocks a new level of prototyping capability, making it easy to create rich micro-interactions. In this Auto-Animate tutorial, learn how to create micro-interactions in your Adobe XD prototype by animating objects between a set of artboards. Create a variety of interactions from taps to drags and have them come to life with Auto-Animate in Adobe XD.
