Copy link to clipboard
Copied
Hey support,
Im having troubles transitioning between 3 artboards with Drag interaction. The "Transition" interaction is working fine but when i try to auto animte it nothing happens. Im not sure if im doing something wrong so i will appreciate your help.
This is the ScreenShot
Link for the prototype:
https://xd.adobe.com/view/d10e229a-701a-4e99-8e1e-e7ef20aabb89-845d/
Copy link to clipboard
Copied
Hi Stav. What is the animation supposed to be? Just slide in from the right?
Auto animate works by comparing the positions and properties of layers/groups with the same name between 2 artboards.
If you have a layer named "Square" on artboard 1, and the same layer named "Square" that has a different position and color on artboard 2, it will smoothly transition between the both of them (square moves and changes color).
If you want a certain object to auto-animate and move between two artboards, it must be present in both. Let's say you want the turntable to go left, and the next one to come in its place. All 3 turntables must be in a group, and present in all 3 artboards with the same names, with you only adjusting the position of the group.
I made you a sample with auto-animate on the turntables with dragging. There is a limitation though, it's a bit one-directional. From 1-2, 2-3, and for 3-2, there is no issue. But you can't add 2 drag triggers to the same element, and change direction based on dragging, so to go back from 2 to 1, you tap instead of dragging.
Here's the prototype, and the .xd file so you can see the setup.
This same thing can be made with component states on one artboard, depending on your preference.
It can also be made with a horizontal scroll group, but you won't have auto-animate (turning of the vinyl) with that solution.
If you won't be animating any elements specifically, but just a slide in from left/right, you don't need to use auto-animate, you can do transition with slide/push from left or right. Same one-directional limitation applies for the drag trigger though.