I’m experimenting with refactoring a loading spinner component to use the new Figma Motion features, to leverage the new motion variables (duration and timing). Previously we had animated the loading spinner by creating a looping rotation using prototype interactions.
I’ve set it up to rotate 360deg with a duration of 1000ms. I’ve dragged the motion timeline to 1000ms. Previewing the animation on the master component works as expected.
However, when I add an instance of this component in another Frame, Page, or another Figma file the motion timeline changes to 2000ms. The spinner is no longer continuously spinning, it pauses in the middle.
How can I ensure that all instances have the set 1000ms timeline duration?
Question
Lock duration of animated components
From some digging it appears that each new Frame on the canvas defaults to the stated 2000ms. You can adjust the Frame’s duration (1000ms, 3000ms, etc.) and every animation added (whether a component instance or not) adopts that set Frame duration.
If I add my component instance (1000ms) to a new Frame (2000ms) I get the undesired effect.
You could manually change the duration of each frame which has an animated component instance, but that would be time prohibitive. Also, it would seem that you couldn’t have two animations in a frame that have different durations.
There’s a work around where I can have two Rotate animations (1st: 1000ms, 2nd: 1000ms with 1000ms delay) so the total time just happens to be 2000ms.
Seems like I shouldn’t have to do that though.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.