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

Interested in the concepts discussed in this article? JsPlumb is now in maintenance mode, but the good news is that we've released a bigger and better library - VisuallyJs. If you can do it in JsPlumb you can do it more easily in VisuallyJs.

To read more about VisuallyJs, check out the home page, or if you want to get started on a trial right now, head over to the trial page at https://visuallyjs.com/trial

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.