Member-only story
Adobe XD: putting auto-animate to the test
(Non Medium members can read this article for free here)
Adobe recently announced their updated version of Adobe XD at Adobe Max in October and introduced a new feature called ‘Auto-Animate’.
As Adobe describes it — Adobe XD has evolved from a basic click-through application to providing you divergent prototyping options such as Time, Tap, Drag, and Voice. Designers can use auto-animate combined with drag gestures to create micro-interactions across art-boards for rich prototype experiences such as on-boarding flows, animations for carousels, cards and lists or progress indicators. Deceptively simple to use, auto-animate creates stunning effects and transitions that help you communicate an animated end user experience. Drag Gestures in XD takes the auto-animate feature one step further by allowing you to simulate the drag experience of touch-enabled devices.
I decided to take this new feature for a test drive and created a few experiments. These are pure UI experiments testing the auto-animate feature, so please don’t judge the usability of these concepts ;).
Downloadable project files available at end of this article.
Here’s the result and learnings from what I created …
1. Carousel Activity Feed
This animation consists of 3 cards that animate when swiping across the screen. The images have a parallax effect on the swipe. I created this by offsetting the images within a mask on an in-between slide, the drag auto-animates to this in-between slide with a timed transision of zero seconds to the final state. This also allowed for the pagination dots to have an elastic effect on the transition, moving from a circle, to an elongated shape, back to a circle.
My Adobe XD setup:
If you are interested in reading the articles in this animation, you can view them here:
