Get to know the drag trigger
When Auto-Animate was released at Adobe Max in 2018, it shipped right along side the drag trigger, which can help you prototype carousels, side scrolls, and much more. Let's take a look at how this works in Adobe XD.
WHAT YOU’LL LEARN IN THIS VIDEO
Create horizontal galleries
Animate between cards
Create draggable interactions
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe. When Auto-Animate was released at Adobe Max in 2018, it shipped right along side the Drag trigger, which can help you prototype carousels, side scrolls, and much more. Let’s dive in.
On this first example, I have a gallery of images extending horizontally off the artboard, and I may want users to drag to the left in order to reveal what’s next. Duplicating the artboard over to the right, I’ll start by shifting the images over, then start making any necessary changes. I’ll enlarge the new image to match the previous one, then shrink that one down – and because I set these up as groups, all the other elements are transforming along with the images. I’m also going to hop into each mask and adjust them accordingly. The non-active image will be smaller, while the active one will be larger.
Great, making sure everything is lined up and exactly where I want it, our two artboards are now set up and ready to be wired.
Switching over to Prototype mode, I’ll select the group with the active image then drag the handle over to the second artboard. Within the properties, instead of a tap trigger, I’ll want to choose Drag for this interaction, and once that’s been selected, Auto-Animate is automatically chosen as the action. I can now wire up one of the images on the second artboard back to the first, and because XD remembers the last settings I used, there’s nothing further I need to do. Let’s see how this looks.
Previewing the prototype, I can now click and drag the gallery over to the left, and you’ll notice that all the changes I made are being animated, including the image’s mask, and since I wired it up in both directions, I can go back and fourth with ease. Let’s check out two more quick examples.
Here's a screen from a photo editing workflow I have been working on, and in specific, this is going to be the cropping interaction. I could devote an entire video on creating this design – which I might do at some point – but in short, I have a few masked elements, a dashed rotation wheel, my image, and an overlay to hide the cropped area. Duplicating this artboard over, I’ll start working on the second state by selecting the image and rotating it until the horizon is just about straight, then I’ll enlarge it so that it fills the entire bounding box. And you’ll notice that because the opacity of the overlay layer is around 80%, it’s allowing the cropped area to subtly peek through. Next, I’ll hop into my masked number counter and pull up the text layer so that the 9 is visible, then I’ll jump to the dashed circle and rotate that a touch, as well.
Perfect! With the second state now complete, just like I did a few moment ago, I can hop into prototype mode, select the layer I wish to drag, in this case the rotation wheel, and pull the blue handle over to the second artboard – making sure that “Drag” is the trigger. Now for the second interaction, I want the checkmark to lead to the final state, but instead of drag, I’ll want a tap also with Auto-Animate for the action.
Let’s check this out. Once the preview is launched, I’m able to drag on the rotation wheel to simulate the cropping interaction, then hit that checkmark to accept the changes.
Finally, let me quickly show you one more interaction. A while back I was exploring what an official Tesla Apple Watch app could look like, specifically, how the trunk and frunk could be opened quickly from the home screen. For that, two drag triggers were used – one leading to the trunk artboard, and one to the frunk. I then utilized a time trigger to jump straight to the text entering, and back to the home screen.
And when it’s time to preview the final prototype, I can easily choose which side to drag the center element, and because it cycles back to the first artboard, I can continuously test this out without having to restart the preview.
And that’s a glimpse of what’s possible using the Drag trigger in Adobe XD. To learn more about prototyping in XD, be sure to check out my other videos. I’ll see you soon.