Create an Animated Loading Wheel Component in Figma

Поділитися
Вставка
  • Опубліковано 23 січ 2025

КОМЕНТАРІ • 44

  • @stonestone9001
    @stonestone9001 Рік тому +13

    for those guys that cannot make it, looks at the video at 3:46, look closely. The author click at the variant first, then click at the esclipe and only rotate. If you just rotate the originally excplise after you add, it will unable to make the circle turn

    • @kellyumerah
      @kellyumerah Рік тому

      It seems that is what is causing mine not to animate, let me redo it

    • @Astrelia22
      @Astrelia22 Рік тому

      Thank you so much!!!

    • @voa.aquino
      @voa.aquino Рік тому

      Thank you!

    • @curious_i_am
      @curious_i_am 11 місяців тому

      It does. I figured our myself. same solution
      @@That1_Pilot

    • @andrearothbauer1766
      @andrearothbauer1766 8 місяців тому

      Thank you so much!

  • @shreyasaha6193
    @shreyasaha6193 Рік тому

    When i am trying to connect the last eclipse with the first one it is not allowing the after delay option. What to do

  • @daniel.dzhahani
    @daniel.dzhahani 5 місяців тому

    Great tutorial!

  • @EmmaMullineauxCEO
    @EmmaMullineauxCEO Рік тому

    How do you get the dots on the circles to not move when you are connecting the prototype?

  • @BethesdaSkater
    @BethesdaSkater 2 роки тому +8

    I've tried this tutorial and one other that takes the same approach, and for both I get no rotation, just the first variant sitting there. Do you know what might be going on with it?

    • @mavidesign
      @mavidesign  2 роки тому +8

      Make sure to rotate the ellipse and not the whole variant :)

    • @septedyindrajannah
      @septedyindrajannah 2 роки тому

      @@mavidesign at first I also had the same problem but in this video I really understood the problem and now it's working for me, thanks for the tutorial ;)

    • @jenniewang8070
      @jenniewang8070 2 роки тому +4

      I've followed every step and couldn't make it work. After doing some research I found out there is nothing wrong with my design, I just need to press "R" to enable presentation mode and it will show the animation. It might work for you as well.

    • @janoregon
      @janoregon Рік тому

      same problem for me. have you managed to figure out what went wrong?

    • @janoregon
      @janoregon Рік тому

      @@mavidesign I am 100% sure I rotated the ellipse, not the whole variant but my design doesn't rotate. any idea why this might have happened?

  • @carap8629
    @carap8629 2 місяці тому

    my animation is really slow and laggy, it doesnt follow a circle like yours it phases in and out. why is it doing this?

  • @vasanth-v7m
    @vasanth-v7m Рік тому

    You saved my day❤

  • @batorshikhgombojav5215
    @batorshikhgombojav5215 Рік тому

    is it possible for export to svg or not ?

  • @raseenahmed-yj5nt
    @raseenahmed-yj5nt Рік тому

    how to download this as a gif

  • @linkonsarkar7550
    @linkonsarkar7550 Рік тому

    work is done ...💚

  • @princetripathi7949
    @princetripathi7949 Рік тому

    Thanks it was helpful.

  • @nazimrakin6766
    @nazimrakin6766 Рік тому +1

    I just followed as like direction but sir its not working.....

  • @aya_____7921
    @aya_____7921 Рік тому

    GOD BLESS YOUR SOUL U AMAZING BEING

  • @guitarmixvids
    @guitarmixvids Рік тому

    Excellent Tutorial! Thank you.

  • @sastaasubscription6987
    @sastaasubscription6987 Рік тому

    Not working please help 😢 me

  • @pazhammedo
    @pazhammedo Рік тому

    I followed your steps but its not working here, what am I not doing right?

    • @mavidesign
      @mavidesign  Рік тому

      To get personalized help and feedback on your project, please join my free Discord server.
      You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite.
      I'm unable to help everyone over UA-cam - thank you for your understanding!
      Mavi

  • @stivenmorantjimenez2054
    @stivenmorantjimenez2054 2 роки тому

    How to download the animation as a gif?

    • @mavidesign
      @mavidesign  2 роки тому +2

      You can't export GIFs directly from Figma, a workaround is needed. You could for example record your screen when running the prototype (for example quicktime on mac) and then convert that into a gif:)

  • @lanella.design
    @lanella.design 5 місяців тому

    Not working T_T

  • @maheshshanbhag1402
    @maheshshanbhag1402 2 роки тому

    Please show us How to create heart rate monitor waves in figma

  • @AsimAntuleVlogs
    @AsimAntuleVlogs 2 роки тому

    Awesome! Was trying this but wasn't getting this smooth animation. Thanks for your video. It really helped.

    • @mavidesign
      @mavidesign  2 роки тому

      Awesome! What was the problem preventing you from creating a smooth animation?

    • @malcolmxfisher
      @malcolmxfisher Рік тому

      For some reason, my animation is super choppy as well. You can see the phase move from 1-4 when I play the animation. I tried to adjust the 500ms up and down to see if that'd affect it and moving it down helps slightly but it's still not as clean as Mavi's.

    • @luwikakoma
      @luwikakoma Рік тому

      @@mavidesign I had the same exact problem, but I managed to get a smooth transition after changing my interactions settings from ease out to linear. Hope this helps😇

  • @Gloria0402
    @Gloria0402 Рік тому +2

    Isn't working 🤬🤬🤬🤬🤬🤬🤬

  • @talbenezra
    @talbenezra Рік тому

    I followed every step. But it doesn't animate. just sits there

    • @mavidesign
      @mavidesign  Рік тому

      You either didn’t rotate the circle but the whole variant OR you need to press R to reset the prototype

    • @aidanwhytock
      @aidanwhytock Рік тому +1

      @@mavidesign Yup I'm in the same boat - I've definitely rotated the ellipses and clicking R in present mode also doesn't work - any other ideas? Muchas gracias!

  • @nikhilkhanal98
    @nikhilkhanal98 7 місяців тому

    This shyte still aint working. Dimag ka bhosda ho gaya