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?
3 Likes
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
1 Like
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 
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!
2 Likes
Unfortunately this glitch still persists 
2 Likes
Anyone trying to animate strokes still, use a drop shadow at 0px blur and 1 px spread - increase spread to increase stroke size. Will animate fine, Gleb just shuttin down peoples dreams over here. 
2 Likes
This has been an issue for a few years now. Any traction on getting this fixed and introduced into a Little Big Updates release?
1 Like
Issue is still there… It’s time to solve this, Figma 
2 Likes
90’s new media heroes may remember the “nested html-tables”-hack: Nested tables with backgound colors and 1px padding enabled revolutionary 1px colored borders on the layouts.
In fact, the same logic can be used in Figma to tackle the ugly border animation -issue. I just had to try. It works. The “faked border” component animates smoothly. (it would be embarrassing to run glitchy and visually imperfect demo and blame Figma… - even Figma is to blame)
Of course hacks like this can’t be the solution, Figma should fix the issue.
Hope this helps.
This bug still persists over 3 years later.
Please Figma, don’t go the way of Adobe and let simple bugs hang around for years and years.
1 Like
Still persists even in the shiny and new UI3. Please, fix this bug.
You can fix it by using dropshadow without blur… but it’s again a trick not a real fix
Oh saw someone already post the same trick …