PROJECTS
Adobe XD
Above This image shows the two-artboard setup for creating an expanded card animation
of the tool. Now on the S1 artboard, click on the
layer L1 and add an interaction on the right side of
the tool by setting Trigger to Drag, Action to Auto-
Animate and Destination to Artboard S2. You can
also add easing based on your preferences. Test
this interaction by clicking on the play button on
the top-right side of the tool. On the S1 artboard,
click on the layer L2 and add a similar interaction
using the same settings but, in this case, set the
Destination to S3. This interaction will create the
left swipe.
EXPANDING CARDS
The second interaction we will be looking at is
commonly seen on most apps and websites where
you are going through a list or a catalogue of
products and when you click on one of those, you
are taken into a new page with more details about
the product. Auto-Animate makes it super simple to
animate this kind of interaction. For this example,
let us start by creating a product catalogue page. You
can choose any product like, for example a mobile
phone (which is going to be our example), apparel,
etc. For the first artboard (S1), create a header bar
with a hamburger menu and a profile icon.
IMAGE AND DETAILS
Now, create a header text element with the number
of catalogue items. For each of the product cards, we
combine C1 and A1 into a layer L ĝ– so that A1 is on
the right side of C1.
THE SECOND CARD
For the second card – C2 – we are going to add
an add to queue right-swipe action in a similar
fashion. Create a group A2 with icon, text and green
background. Add it to the left of the group C2 and
create a combined layer named L2. Now, the first
artboard (S1) is complete. Let’s duplicate the entire
artboard twice, into two states – S2 and S3. We will
be using S2 for delete swipe and S3 for add to queue
swipe. In order to do that we need to make some
changes for each of these artboards. Here are the
settings for both swipes:
O S1 – Change the Opacity of A1 and A2 to 0% and
arrange L1, L2 so they are centre-aligned.
O S2 – Arrange the L1 card so the right edge of L1 is
aligned with the other cards. Change the Opacity
of A2 to 0%.
O S3 – Arrange the L2 card so the left edge of L2 is
aligned with the other cards. Change the Opacity
of A1 to 0%.
ANIMATE THE ARTBOARDS
Now that the artboards are completely set up, the
next step is to animate them. You can do this by
going into the Prototype mode on the top-left side