Smart Animation Not Working

I need to know how you’ve made the animation to be able to answer this. Can you explain or share a screenshot or design file?

Hi Avokadomos! Thank you for your reply.

I don’t see anything wrong in the screenshot. Make sure you’ve placed it as a component instance in your frame, and not just one of the variants.

I made another prototype that you can inspect in Figma:

That looks great. Yes, I believe I am using it as a component in my frame. It was dragged from the assets on the left.

Looking at your component vs mine helped. I see that my problem was I was setting the instance to be rotated instead of the actual ellipse itself. Everything seems to be working now, thank you so much!

I’m glad you figured it out! Consider clicking the checkbox under my previous comment to mark your topic as solved. Have a nice day!

hello, im having the same animation not working, I’ve tried the mentioned method and its still not working, Is it a bug?

It’s difficult to know without further information. Can you share a design file that showcases the issue?

I am having the same issue. The animations doesn’t start. The shared example also doesn’t start when I play the prototype. Any help or suggestion will be greatly appreciated.

It’s hard to tell by the screenshot. All variants look the same, so could be that there just isn’t anything to animate. I assume that the circles are supposed to expand like water ripples. Make sure all layers are named the same, and that they have the same structure in all variants in order for smart animate to recognize them.

facing same error
and i can’t understand what is the problem

I’m gonna need one of you guys to share your design file to figure our what’s happening here.

do you have a tutorial
if yes please share link

i got the solution
solution is we rotaes full or frame
we only need to rotate that circle not frame

Thanks worked now!

Solved the same issue I was getting. was not rotating the circles

Hey having a similar issues but not exactly the same, related to a moving background.
When they are separated variants it works fine, but when you convine them as variants they stop being recognized as similar layers.
E.g. I have a layer called blue in each one thst moves atound, this is no longer recognized as the same

Are you able to share your design, so I can look into the issue that you’re having?

@Avokadomos Can you help me?
I am trying to make a menu bar with smart animate. My idea is: when you click in a icon, the circle slides to referring icon gently.
I tried to follow a tutorial on youtube doing the exact same thing, however, the smart animate option doesn’t appear, only the normal animate.

You should use variants if you want to smart animate between your designs. Select the component and click add variant on the top toolbar. You can then add prototype connections between the three variants.

@Avokadomos
That helped me a lot! in the video that i saw, the person didn’t explained this. However, after I corrected my design, my animation didn’t work out.

You shouldn’t use the actual component in your design. Go to the Assets tab and there you will find all your components. Drag yours into the design (it’s called an instance). The instance will play any prototype animations you’ve set up.

More info here:

I am also facing the problem of animation doesn’t work

Hi everyone! Just to add if anyone else if having the issue I was having with my spinning loader, which was that the animation was working but the smart animate wasnt working to make it smooth.

I had created 4 variants for a spinning loader and connected them with delay and smart animate. The smooth animate was not working was because within each variant I had numbered the loader (1, 2, 3, 4). Make sure the label is only different for the component variants themselves and not for the item you want to animate.