🦄 3.0.0 — the border can measure something now
Hey everyone 👋
BorderAnimate wraps any element and gives it an animated border. Version 3 adds two things it could not do before: measure a value, and wait for you.
What is new
draw — give it a progress from 0 to 100 and it draws exactly that share of the border, corners included. Put a track underneath and your card border becomes the progress bar.
dash — marching ants, dots, or a fixed number of evenly spaced segments. Lengths are percentages of the perimeter, so the pattern stays even whatever the size.
comet — a beam with a fading tail that keeps a constant speed on any shape.
trigger — hover, focus-within, or in-view. On a form field, focus-within is the whole answer: no state to wire up, and it keeps working with the keyboard.
The why
This started from an article about animating border-image. I tried it, and it does not work here at all: border images ignore border-radius, so on a rounded card you get square corners. But the trick underneath it — registering a custom property so the browser can interpolate it — is exactly what a border needs to react to a state instead of looping forever.
While checking the old CSS against real pixels I also found two bugs that had been shipping for two majors: the glow was invisible inside a Card or a Paper, and making the border thicker broke the pulse variant into four disconnected lines instead of thickening it. Both are fixed.
The takeaway
If you ever animate along the edge of a rounded box: an SVG rect with pathLength="100" turns stroke-dasharray units into percentages of the real perimeter. Corners included, no JavaScript per frame. Just make sure the dash period divides 100 — otherwise the pattern breaks exactly where the perimeter closes, and it reads as the animation snagging on the first corner.
A couple of questions
Would you use a border as a progress indicator, or does that belong to a bar?
Which trigger would you reach for first?
Replies