Nested animation stops when using variables

I am encountering a bug where the nested animation inside a component stops in the middle when variant state is changed using variables. Can anyone from Figma team help?

Steps to reproduce:

Step1: Lets say a component named X has 3 variants(named alpha, beta and gamma) out of which one variant(alpha) has an animation (animated using a nested component named Y).

Step 2: A local string variable(StringVar) is created and the value is set to one of the component X’s variant names eg:‘alpha’.

Step 3: Drag a child component of component X onto canvas and link the state to the local string variable created above.

Step 4: Create two buttons labeled betaBTN and gammaBTN with mouseenter and mouseleave interactions. So on mouseenter, the local variable StringVar is set to variant names (beta or gamma) based on the buttons(betaBTN or gammaBTN) the mouse is moved over. This works well so far. The issue is with the mouseleave trigger which is set to the animated variant (alpha) so when mouse is outside the button areas you will see some animation. But it is not working as expected. It is changing the variant, but the nested animation stops in the middle of the animation and doesn’t continue. There is no option to reset the state of the variant when using variables.


I have attached the file if anyone wants to look at this. Thanks in advance.
variable state change.fig (48.7 KB)

1 Like

Hi there,

Thanks for reaching out and sharing the details with the file! I am asking with our internal team. I will get back to you when I have any update.


Thank you, @y_toku . Looks like there were a few posts talking about this issue. When changing component variants/states using variables, nested animation within a component doesn’t work.

Please let us know if there is an update on this issue.


@y_toku more than happy to jump on a zoom to demo the issue. :slight_smile:

Any update on this? @y_toku @Junko3

@N.A.G.A @Guy_Meyer1 My deepest apologies for the late reply! I’ve been consulting with our internal team about your issue. However, I think it’s best if our support team takes a closer look at your file.

Could you please contact our support team directly and provide a copy of your file:

Make sure to use the email linked to your Figma account, include links to the file in question, and grant access to Don’t worry, sharing your file with us won’t affect your billing.

Sorry again for keeping you all wait but I hope our support team will help you further.


I have a workaround to this that may help. TL;DR - opening an overlay jump-starts nested animations.

Explanation and demo file here: Trigger `On Delay` action with boolean logic - #6 by Darwin_Campa