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)
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.
@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.
Make sure to use the email linked to your Figma account, include links to the file in question, and grant access to support-share@figma.com. 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.
Problem still exists. I have had no success getting any animation to work when using a variable to change component states.
First try: Creating a “start” variant on the parent level that after a short delay triggers auto animate (slide into view) to another variant “end”. Variable would be set from navigation but animation would never happen.
Second try: Nest a component that has the same animation then set several of those as variants in a master component that would then be switched via variable…animation never runs.
Basically, what I am trying to accomplish is having a hover state on a navigation item that would then trigger an image animating into view (slide + fade-in). Each nav item would have a different image animating into view.
Hi there, Thanks for reaching out. Sorry to hear that you still have an issue.
It’s hard to know if what you’re seeing is a bug or how it’s supposed to work without looking at the file. I suggest you contact our support team so they can take a closer look at your file here: https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001744374
When reaching out, please remember to include the following details:
Your Figma account email
Recording or Screenshots of the issue, capturing the full Figma screen with the left and right-hand panels
The URLs of the affected file and any related library files, add support-share@figma.com as an editor of those files(this will not affect your billing)
It seems like it is close to what I was looking for but it is pretty glitchy . When I hover over one of your nav items the animation doesn’t always play. Are the star and triangle animations part of the same component? What I was trying to do in my scenario was have a group of images all with a fade-in animation within the same component. Hover over a nav item and nav item updates variable, component switches to proper variant but then the delay I have set on that variant to transition to the next variant never gets triggered (see attached fig file). Navigation Test.fig (3.4 MB)
@Shane_ANDERSON Apologies for the glitch . I was just trying to show that a nested component with a variant animation is working.
I have a project now that uses nested components but I used the action “On click/On tap” . I’ve shown the status on purpose right now to show you how the animation and conditions work when the action is loaded and clicked.
For your project right now, you are using the hover/mouse enter/leave action.
I will try that…
Just take note, in nested components and are you going to play the animation of the child component*(component with variant animation)* you need to call the variant1 and variant2 to trigger the animation*(because if you just call the variant1 it will not play the animation)*.
Take a look at this screenshot to call the nested component to play the animation when the button is clicked:
I don’t know what I’m doing… if this advanced prototyping or a damn thing … but I hope it will help ya’ll until the Figma update and make this in simple way.
Well I don’t know what I’m doing either but saying to call the start variant and end variant did get me closer but for some reason it plays the animation twice. Navigation Test.fig (3.4 MB)
Ok, I added the set variable to the Hover action and now it works much better, though it would be nice if the nav hover animation and the image animation played at the same time, but this is at least looking good Thanks for your help! Navigation Test.fig (3.4 MB)
@Shane_ANDERSON By the way, I’ve created a simple way for your Fig Test…
For the hover issue… I’ve created a simple trick for the button.
I added a hidden button to handle the “Mouse Enter” on top of the “Hover” button.
For your components with the animation variant, I’ve made a simple trick as well. For the interaction use “Key/Gamepad” to handle the smart animation and use one variant for your transition effect like make as default or variant1.
I know this is difficult to explain here but check out the screenshot and the Fig file that I created based on your Fig test file. I’ve created a Slide fade and a simple fade.
This really helped me in case your issues are the same!
I wanted a button that changed colour when clicked (animation) and also toggled visibility for something (boolean variable)
I had a component set showing a button with two different colours to create the animation, and of course this animation didn’t work once the boolean variable was applied.
I couldn’t work out how to turn my animation into its own variable to see if that worked. I tried variable modes to change colour but I couldn’t use clicking as a toggle to switch between the colours, it would only go one way, but I didn’t know how to get boolean variables to work to take advantage of the toggle.
Then I saw that in this video she MANUALLY names her variants true and false, which Figma automatically recognises and turns into a boolean. So then when I add that boolean to the button in the prototype it switches between the two variants and performs its other variable function
… but I hope it will help ya’ll until the Figma update and make this in simple way. 
