Stroke drawing
An animation where a line is drawn gradually from one end to the other, or erased the same way.
In detail
Stroke drawing makes an outline appear as if someone were tracing it by hand: underlines that write themselves, arrows that point to the button, frames that close around the price. It works by showing only a segment of the outline and growing (or shrinking) it during the movement.
BannerMotion offers it as “Draw stroke” (the line appears) and “Erase stroke” (the line disappears), in normal or reverse direction. It applies to SVG strokes; there are no infinite loops, and because the browser repaints the shape while it animates, use it on a few elements and with a short duration.
An underline below “Offer” that draws from left to right in half a second.
Related terms
Where it appears
[This term does not appear in any guide yet.]