Figma Support Forum

Smart animate for frame with stroke glitching

I’ve applied smart animate to my interactive component. Its got a stroke applied to it with a radius of 16px. Every time it expands and collapses the stroke glitches and pixelates. Any clue what’s causing this? Is it a known bug?

That’s not related to interactive components, it works this way with Smart Animate in general. Stroke + corner radius animation is not supported yet so it simply animates the transition between two raster images. Example: https://figma.fun/l4x8m3

Thanks Gleb for the response. My bad I wasn’t aware of this being a smart animate bug in general. Looking forward to a fix for this in the future :pray:

I’ve had this issue too and found a work around if you’re interested. In the image below, I used a frame that is the size of the overlapping area between the two rectangles and set it to clip content (I turned off clip content for the image so you can see how it’s working under the hood). Inside the frame, I have two rectangles with the desired corner radius and outline. The second state of the component is the size of the filled rectangle. On the transition, I have the top one (just the outline) slide down to be in the same position as the filled rectangle and expand the frame to fit the expanded rectangle size. Hope this helps!