@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.
1 Like
@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.
What does it mean when you component is looking like this? When i run the prototype, the component is static in this dashed field.
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:
1 Like
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.
1 Like
thank you!
Can someone help me understand why my smart animation is not working here?
when i click on the education icon, the animation doesn’t work. It doesn’t happen in the smooth way, it looks like that it has been setted to dissolve, instead of smart animate, and it is setted as smart animate.
It is strange, because the smart animate animations work on certain icons, but not in the other. I wonder why?.. @Avokadomos
I am using a picture I got from my team. I have made proper interactions, but when I click on play it says that it needs to have at least one frame. I think the issue is me using pictures/shapes that are not in Figma.
Smart animate only takes into account matching layers. The reason your animations default to dissolve is either because your layers are not matching, or the property you’re animating is not supported.
You can create a frame by using the frame tool F. Whatever you put in the frame will display in the prototype.
I believe i poorly explained my problem. Take a look at this screenshot:
All the icons of the sidebar have smart animate, however, the smart animate doesn’t work with all of them. In some icons the animation happens smoothly, and with others it is broken.
I faced the similra issue. After reading here and my own investigation I found following
- The after delay event needs to happen on the frame containing loader
- The loader needs to be have angle rotated not the frame.
2 Likes
Hello, I am having the same problem. What do you mean by setting the instance to be rotated? I created the first spinner as a component then I added variants and to eac variants I applied different rotation. Is that now what we should do?
Hi! I’m trying to animate this button and it seems I have no success to do it. Even though I didn’t use variants, it should work if I have a main component and I animate each noodle to the designated page but I can’t figure out why it doesn’t.
Can someone help? Smart animation isn’t showing on my Figma and I don’t know why. The tool is there but I can’t connect objects?
Hi,
I have a problem with my smart animation scrolling not scrolling, but teleporting to the bottom. I can’t seem to figure out what’s wrong. Would highly appreciate some help! Thanks 
I created an loading circle component, and placed it in my design. When I start the prototype from that flow, nothing happens, even though I have the component variants set with smart animate. I was following a tutorial and thought I did it perfectly.
Kindly find the link design below and help me in fixing it.
