Skip to main content
Participant
Jun 18, 2021 8:13 PM UTC
Answered

Nested Components auto-animate bug

Hi guys,

I have a couple of nested components - everything is named neatly. When using auto-animate the animation happens between 2 random objects... wtf?

 

What am I doing wrong? Or is this a bug?

 

See Keyboard Normal and Keyboard Audio - please click on the mic icon. Animation should happen between the mic icons. Instead Animation happens between the "mic icon" and the "enter icon".

 

 

 

This topic is closed to new replies. Start a new post to keep the conversation going.
Spas K.
Spas K.Correct answer
Community Expert
Jun 20, 2021 7:06 AM UTC

Hey there. Between your two artboards, the other elements of the component are missing, so Xd doesn't know what to do with them (is what I'm assuming). I've fixed it for you. But in general it's not a good idea to animate like that - between two artboards, and at the same time using two different instances.

 

Either animate between two artboards without the container component, or use component states. I've added the component states solution in there as well.

 

Here's the file.

 

PS. You can't link a nested component to another state of the container component. You need to put it in a group first, and link that group to the second state. You can see that in the "Component states" solution in the file.

3 replies

Spas K.
Community Expert
Spas K.Community ExpertCorrect answer
Community Expert
Jun 20, 2021 7:06 AM UTC

Hey there. Between your two artboards, the other elements of the component are missing, so Xd doesn't know what to do with them (is what I'm assuming). I've fixed it for you. But in general it's not a good idea to animate like that - between two artboards, and at the same time using two different instances.

 

Either animate between two artboards without the container component, or use component states. I've added the component states solution in there as well.

 

Here's the file.

 

PS. You can't link a nested component to another state of the container component. You need to put it in a group first, and link that group to the second state. You can see that in the "Component states" solution in the file.

Translate
Participant
Jun 21, 2021 3:01 PM UTC

Appreciate it. Thanks a lot!

Translate
Participant
Jun 18, 2021 8:34 PM UTC

sorry - forgot the file: https://we.tl/t-sGiZ0lEyfj

Translate