Auto-Animate allows you to easily create prototypes with immersive animated transitions. Simply duplicate an artboard, modify object properties, such as size, position, rotation, and apply an Auto-Animate action to create an animated transition between artboards. To use Auto-Animate, ensure that the objects you are looking to animate have the same layer name between each of the artboards. You can also use the improved search experience to show only relevant layers and artboards containing a keyword, without the layers structure (example-expanded groups).
Traditionally, designers used multiple transitions across various artboards to wire their prototype interactions. With Auto-Animate, designers can use XD to create micro-interactions between two artboards by:
- Duplicating objects between artboards,
- Modifying their properties such as size, position, and rotation. For information on supported properties, see Supported properties for auto-animate.
- Switching to prototype mode,
- Adding Auto-Animate as a new transition, and
- Previewing the prototype in desktop or mobile.
Like using Tap to trigger transitions, you can combine Drag with Auto-Animate to specify micro-interactions across artboards. New objects fade in and deleted objects fade out during a transition that uses Auto-Animate.
- Prototypes using Auto-Animate have certain limitation with text animation. We currently do not support animating character spacing, line spacing, and paragraph spacing on the web.
- We currently do not support drag gestures on web. Prototypes that use a drag trigger will dissolve on tap.
Adobe XD has evolved from a basic click-through application to providing you divergent prototyping options such as Time, Tap, Drag, and Voice.
You can use a Drag gesture to simulate user experiences such as dragging cards or screens. When you select Drag from the list of triggers, XD automatically switches the Action to Auto-Animate.
Currently, previewing a Drag gesture is supported only on desktop and mobile.
The start and end position of an object determines the direction of the drag. Drag from left to right in the preview window or mobile app if the object on the first artboard is to the left, and the position of the same object on the second artboard is to the right. You can similarly create a drag event from right to left or top to bottom and so on.
In the Trigger head-up-display, set the following options:
- Trigger: set the gesture type to Drag.
- Action: set to Auto-Animate.
- Destination: set the destination to the second artboard.
- Easing: select the options from the drop-down list.
A. Gesture type to Drag B. Action to Auto-Animate C. Set the destination artboard D. Select Easing options
In the desktop app, click Share and choose Share for Review (for Prototype) or Share for Development (for design specs). For more information on sharing prototypes and design specs, see Share prototypes and design specs.
Prototypes using Auto-Animate does not support animation playback and dissolves between the start and end of an artboard when viewed on the following browsers:
- IE 11 browser
- Edge 12
As a workaround, open the prototype in any of the other supported browsers listed in the System requirements.