Skip to main content
Zoe5
May 20, 2024
Solved

Animation not working at all

  • May 20, 2024
  • 7 replies
  • 1810 views

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

This topic has been closed for replies.
Best answer by Vishal_Ramawat

Seems, you have converted the blue arc to vector and that is causing the issue.

image

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.

image

7 replies

Vishal_Ramawat
Vishal_Ramawat
May 21, 2024

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?

Zoe5Author
May 21, 2024

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

Vishal_Ramawat
Vishal_RamawatAnswer
May 22, 2024

Seems, you have converted the blue arc to vector and that is causing the issue.

image

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.

image

    Zoe5Author
    May 22, 2024

    Ok thank you so much!

      djv
      Figmate
      djv
      Community Support
      May 22, 2024

      Thanks for hopping in and helping @Zoe5, @Vishal_Ramawat! 🙂

      Please let us know if we can help with anything else.

        Zoe5Author
        May 27, 2024

        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.

        Figma – 27 May 24
        Vishal_Ramawat
        Vishal_Ramawat
        May 28, 2024

        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

        image

        image

        image

        Then use the first variant on the Frame.

        image

        Terms & ConditionsAccessibility statement