Component Properties Smart Animate Flicker

Hello,

I’ve been working a lot with using smart animate for prototyping and in general, I am really happy about it. :partying_face:

But with the new ‘Properties’ functionality, I hoped this could help me out a lot, and for the most part, it did! But for some, it created a problem…

The problem arose, in some cases, because acts differently from how you can use smart animate with frame-to-frame animation.

How I see it; the properties animations sees every variant as a new element - this means if you have a static icon, it will flicker with smart animate, because it will fade-in/out the new icon and replace the other when you try to just keep the icon static with no changes?

You used to be able to duplicate elements to create seamless smart animations between frames where elements without changes stayed the same and didn’t create a flickering effect, but this can’t be done with variants since every variant sees the same element as a new?

I have tried for hours now to get this working, figuring out if I can find a way - but now I give up.

In this example, you can see the old method vs. the new Properties method of making a button with an icon and an animated background on hover.

Figma file:

If anyone has any ideas or knows a fix for this - I would be really appreciative!!! :pray:

Thank you in advance and stay prototyping.

UPDATE/EDIT
Testing with multiple components makes the issue more visible than the 1 icon I prepped here for demostration.

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.