Nested animation stops when using variables

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.

Thanks,
Toku

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. 🙂

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: https://help.figma.com/hc/en-us/requests/new?

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.

Thanks,
Toku

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

Same problem with me — a nested component with looped animation on delay doesn’t work after parent component variant is changed

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)

Thanks for your assistance and understanding!

@N.A.G.A I’ve downloaded your Figma file and created a nested component with a variant animation: https://www.figma.com/proto/poImmmhAmduAyKWYRaukQc/variable-state-change?page-id=0%3A1&node-id=1-7&node-type=CANVAS&viewport=184%2C32%2C0.63&t=ZDKIGdcZANtvwnF9-1&scaling=min-zoom&content-scaling=fixed

Let me know if that’s correct 😅

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)

So… 7 months later, we still havn’t heard from Figma about this? 🤔
This issue is still persistent.

Nested smart animation do not trigger on ‘Conditional’ & ‘Set Variable’.

The only smart animation that works is a drag animation like a carousel.

@Shane_ANDERSON That’s great! You’ve figured it out! 👏
I agree with @Miggi_from_Figgi that “Start Simple”. 😁

@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.

https://www.figma.com/proto/ynunPitJ9bSuGIeeAVTRfu/NavigationTest_Simplify?page-id=0%3A1&node-id=1-53&node-type=CANVAS&viewport=-235%2C7%2C1&t=ifwbBdmZdjo8btiE-1&scaling=min-zoom&content-scaling=fixed

NavigationTest_Simplify.fig (3.5 MB)

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