Copy Url Button

Animating opacity, blur, and scale between two contextual icons has become fairly common. Instead of instantly swapping one icon for another, these small transitions help connect the two states and make the change feel more natural. They're subtle details, but they make interactions feel smoother and reduce the visual jump that comes from an immediate replacement.

I wanted to see what it would feel like to animate pathLength as well. The stroke draws itself in and out, almost like it's being traced. This isn't icon morphing, the two icons remain completely separate shapes with their own path data. It's simply another way to transition between two states, using the stroke itself as part of the animation instead of relying only on opacity or scale.

I haven't seen this approach used very often. My guess is that it doesn't work well with every icon pair, since the result depends a lot on the shapes involved. Icons with a single continuous stroke tend to trace cleanly, while filled shapes or icons with several disconnected paths can end up looking a bit messy instead of smooth. Some transitions feel surprisingly natural, while others look awkward, which makes it an interesting thing to keep experimenting with.