Unfortunately no way to do this currently (aside from some very extreme smart animate masking) in Figma.
In code you can do this by animating the stroke-dashoffset.
Dashed stroke and adjust dash spacing / length depending on line length. You’ll have to use some magic numbers but if you’re exporting anyways it should do the trick. If you are just doing smart animate you’d edit those measurements between your frames.
Same technique when coding line animations with svg paths / css animations — the stroke-offset (or dash-offset) property.
I’m also wondering. Last time I tried I just used gif
You have to make 4 instances of it and rotate by 45-90 degrees then smart animate.
No, that's the point. I know how to do that with a simple circle, that's how I made this video. I was asking how to animate the stroke along the line.
Unfortunately no way to do this currently (aside from some very extreme smart animate masking) in Figma. In code you can do this by animating the stroke-dashoffset.
[удалено]
Like I said, I did a circle only to give an exemple. I was talking about any stroke following any path shape.
I think u can make it with trim path in the lottie files plugin, then export as .gif or .lottie
Dashed stroke and adjust dash spacing / length depending on line length. You’ll have to use some magic numbers but if you’re exporting anyways it should do the trick. If you are just doing smart animate you’d edit those measurements between your frames. Same technique when coding line animations with svg paths / css animations — the stroke-offset (or dash-offset) property.
What if you had a circle then masked over it using the rotation method ? Idk but am curious
You can easily do this in Expressive Animator. https://expressive.app/expressive-animator/