Hi, I’m very new to Figma. I created a loading animation using a tutorial and followed all the directions about creating variables within the component. I’m using delay - change to - smart animate. I made sure the instance is on the object and not the frame. I’ve built it several times and it will not animate in preview no matter what. I have successfully used animate with click through on a different project. Please let me know what i’ve done wrong.
Here is the link to my file.
\https://www.Figma.com/design/Y6yNhMxEEPlqR96sAfbtRp/Loading-Animation?node-id=0%3A1&t=4Ol6ISvMjofC78K0-1
Solved
Animation not working at all
Best answer by Vishal_Ramawat
Seems, you have converted the blue arc to vector and that is causing the issue.
You just need to duplicate the outer circle and convert it to arc and it will work fine.
Use the control on the circle (sweep) to make it into arc.
This topic has been closed for comments
I tried placing the instance of 1st Variant (Default) from the component on frame, as I thought you’ve placed the component on frame so it isn’t working.
But, it didn’t work.
Then I deleted all the variants and recreated them. It was working fine. Could be that there is an issue in the process of creating variants.
Mind sharing which tutorial you followed?
Thank you for trying it.
I followed sort of a mashup of two tutorials.
This short: https://www.youtube.com/shorts/qV7ot8pF3IY
And this video: https://www.youtube.com/watch?v=5-nb_uztyYY
Seems, you have converted the blue arc to vector and that is causing the issue.
You just need to duplicate the outer circle and convert it to arc and it will work fine.
Use the control on the circle (sweep) to make it into arc.
Thanks for hopping in and helping @Zoe5, @Vishal_Ramawat! 🙂
Please let us know if we can help with anything else.
Hi there!
I am still having the issue of it not animating. I made the change you suggested but I have not been able to animate it.
Here is the new file if you are willing to take a look.
You have OnClick applied to 2 Variants.
Also, you are using ellipses to round the corner of progress indicator, remove them.
You can use corner radius to round the edges.
Change the rotation after creating each variant. Variant 1> Add Variant2 >Rotate > Add Variant 3 > Rotate > Add Variant4 > Rotate
Then use the first variant on the Frame.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.