Skip to main content
Question

Animation only works after reset

  • December 21, 2022
  • 6 replies
  • 1408 views

Tom_Alexander

Hey guys! I’m new to Figma, so forgive me if this is a totally stupid question.

I’m trying to animate a spinning wheel for a loading screen using variants. I followed a handful of YouTube tutorials that all suggested the same method, but none of them animated when I previewed. I eventually caved and ripped someone’s from community, but it still would just sit there on preview. I eventually realized that I needed to hit reset (R) to make the animation occur.

Does anyone know what’s up with this? A setting I need to change? Let me know, thanks so much!

Figma – 20 Dec 22

6 replies

Reviving this thread because I had the same problem after an update a while back. I found there was a relation between my frame location on the canvas and wether “after delay” smart animations would work without having to click “Restart” on the prototype… Bizarre!

If my frame that’d been selected as “Flow starting point” is above other frames in the prototype, the animations work on first load of the prototype. If I move the flow starting point frame to an equal horizontal level or below any other frame thats in the prototype, the animations require a “restart” to work. I’ve tried this a number of times in different files, and have repeated the fix/break.

Would be interested if anyone else is experiencing, or if there is a different solution thats been discovered.


Simon_Wehrli

Experiencing the same thing with my prototype.
For 3 consecutive screens I have the same animation. However, it only works for the first animation played - meaning if I start the prototype directly from the second screen that one works, same for the third but never 2 following each other.
A small work around I found was to actiate ‘Reset component state’ in the interaction menu. This solves only half the problem though since only half of the animation is playing, the second half of the animation is still not happening.


Simon_Wehrli

Okay after trying out pretty much everything I found a solution for my problem (however, this is probably really specific for my case).
I copied the first screen and instead of just adding the animated component a second time, I addtionally left the first component in there and just set it’s layer opacity to 0%. I repeated this step for the 3rd screen so I had the component in there 3 times but 2 of them are set to 0% opacity. I guess Figma kinda accepted that these are new components, since the 1st and 2nd were in there as well.

I hope this makes sense 😃 Let me know if I should explain it again in more detail.


  • 1 reply
  • August 26, 2024

Hey… Thanks for the idea… i guess the problem is still there in the latest updates, I don’t know why it still there… you’re correct, when i make sure the “flow starting point” frame is above all frames & no frames are above the starting frame, the after delay animations in the starting page works fine without restarting… I was getting mad about it… Thanks for the tip, you saved me a lot of time…


edlyn
  • New Member
  • 1 reply
  • March 19, 2025

I’m having the same problem, the “after delay” animation is the same for several instances of my component but for some reason only the animation of the first instance will play. @Simon_Wehrli I tried your idea and it worked in the presentation once but after trying multiple times later, it doesn’t work. It’s driving me nuts 😭


Jeremy_Knight

I had this problem also and I found a simple (but sorta stupid) fix:

Make sure each instance of the animated component has a unique name. 

 

I had a bunch of instances of an animated component all named “click-anim”. When I renamed each to: 
click-anim-1
click-anim-2
click-anim-3

They all worked fine. I think you need to trick Figma into recognizing that they are different items, not the same item. 

Also, if you have a bunch of instances of your animated component do this to save time:

  1. Select one instance​​​​​​
  2. Type CMD+/ and run the command “Select all with same instance”. This will select all your instances. 
  3. Type CMD+R to run “Rename Selection”. It will open up a window that will allow you to name them all with sequencial names (anim1, anim2, anim3, etc). 

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings