By Howard Pinsky
The drag trigger in Adobe xd combined with the power of auto-animate helps you set up swipeable elements like galleries of images. On this artboard, there are several cards extending horizontally and we may want users to be able to swipe over to see what's next. Duplicating the artboard over to the right, move and transform the various layers so that the next card is front and center. And for added effect, you can jump into the mask and transform the images. With both states now ready to rock, hop into Prototype mode and select the card you wish to initiate the drag.
Next, pull the blue handle over to the second artboard and then make sure drag is selected under trigger which will automatically switch to auto-animate. Then--if desired--hook up a card on the second artboard back to the first. Now, previewing the prototype either on a desktop or your mobile device will let you drag the cards to their next position with all the changes beautifully animating.
And that's your bite-sized look at the drag trigger in Adobe XD.
Create swipe interactions easily with the drag trigger in Adobe XD. Select Drag from the trigger options when creating a prototype. In Preview mode, use your mouse or finger to drag on the target element to preview the drag animation. Swipe interactions are great for prototyping various behaviors like swipe to unlock, reveal notifications, and more, mirroring the swipe interactions found on common mobile platforms.
