Skip to main content

I am trying to show the hidden box using a boolean variable but the problem happens when I apply the variable on the instance which will change to another variant of it using the time delay, But that change of the variant to another variant is not happening in the time delay prototype but if I give the on-click to change to the other variant that’s work. not sure what is wrong with it.


Attached is the Figma link


Figma – 25 Apr 24

Hey @Admin16, sorry to hear that!


On our end, we can see that support replied to your ticket on Aug. 5th. Please check your spam/junk folder just in case it landed there by mistake.


In the email, Ryan explained that they are investigating this with our engineering team, and they will keep you updated on the progress of the issue and provide more information as soon as it becomes available.


In the meantime, they also found a workaround where if you add a onClick change to interaction between variants 1 and 2 this will help, even though you will not be clicking the instance to initiate this interaction and will still be selecting the “Change variant 2” button it helps with the after-delay interaction to be triggered. You can view a sample of this in the file you provided in the section “Figma Example”.


@Admin16 Is this something you’re looking to accomplish? 🤔




Component with variant animation:

Use “Key/Gamepad” to set your smart animation in every variant. Don’t use “After delay”.


Button:

To execute the animation when clicked, set the variable and call each variant… like “default”, “variant2”, “variant3”


Also, don’t forget to create Variables to bind a variant.


Figma – 7 Sep 24

Hey @jhingrhed thanks for the help, the thing is I wanted to control the time duration when the variant will change from Variant 2 to Variant 3. For that, I have to use the After delay.


Hi @dvaliao it’s been a month since this issue may I know when this issue will get fixed?


@Admin16 💯 Yes! you can use “After Delay” to “Variant2” to “Variant3” . Then in the Button (onClick), you call only the variants “Default” and “Variant2” to play the smart animation then, it will execute the Variant2 delay before turning to Variant3.


Also, we can use a custom counter to set the delay and timing using conditions but that is too complicated for this. We like a simple solution for now. 😅


Button:



  • Set Variable then set the variant “Default” and “Variant2” to play the animation in the component(w/ variable).


Component with variant animation:



  • “Default” to “Variant2” and vice versa set to “Key/Gamepad” with smart animation

  • “Variant2” to “Variant3” set “After delay” with smart animation

  • “Variant3” to “Default” set “Key/Gamepad” with smart animation (for backward animation)


Key/Gamepad” for the hold/stop variant and set the smart animation (forward & backward animation).

After delay” for the delay before jumping into the next variant.


Calling the variant “Default” and “Variant2” when the Button click is to execute the smart animation(set by “Key/Gamepad & After delay”) in the component. Also, we can use this trick in nested components like the child component has a variant animation. (it’s work for now until the Figma update.) 😅 ✌️


✔️ check my sample (delay 4000ms): https://www.figma.com/proto/2vOnZ91NB5oHXDpg36BFKv/clicktorun_ver2?page-id=0%3A1&node-id=1-2&node-type=canvas&viewport=1556%2C665%2C2&t=7s2BgBcVyurdf11S-1&scaling=min-zoom&content-scaling=fixed



Reply