• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Auto animate isnt functioning properly

New Here ,
Sep 16, 2021 Sep 16, 2021

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

Auto animate ss.png

 

Link for the prototype:

https://xd.adobe.com/view/d10e229a-701a-4e99-8e1e-e7ef20aabb89-845d/

 

 

Views

177

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 17, 2021 Sep 17, 2021

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines