Skip to main content

Animating edges in SVG

· 2 min read
Simon Porritt
Simon Porritt
JsPlumb core team

We've had a few queries recently regarding the possibility of adding support for animated edges to JsPlumb Toolkit. Like this:

We've never exposed an API to do this because it's never really occurred to us do so, given that achieving this effect is about as easy as falling off a log. There are three parts to this:

1. Define the CSS animation​

Define a CSS animation with a single keyframe that sets the dash offset:

@keyframes dashdraw {
    0% {
        stroke-dashoffset:10;
    }
}

2. Map the animation to a CSS rule​

.animated-edge {
    stroke-dasharray:5;
    animation: dashdraw .5s linear infinite;
}

3. Use the cssClass property in an edge definition to map to this class​

toolkit.render(someContainer, {
    ...,
    view:{
        edges:{
            animated:{
                cssClass:"animated-edge"
            }
        }
    },
    ...
})
Animated Edges

That's it! That's all you need to do. As easy as falling off a log.

Library support​

We tend to avoid polluting JsPlumb with functionality that is easily created such as this is, but if you're a licensee or evaluator of JsPlumb - or just someone with an opinion - and you've got suggestions for how we could usefully build support for this into the library, we'd definitely like to hear them.

Start a free trial

Sending your evaluation request...

Interested in the concepts discussed in this article? Start a free trial and see how JsPlumb can help bring your ideas to market in record time.

Get in touch!​

If you'd like to discuss any of the ideas/concepts in this article we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.