Dynamic line between objects?

Hello, I’d like to build a site based on my design. So far everything is working. One thing I don’t know how to approach is the dashed line connecting the main elements. Is there a way to somehow specify anchor points and have it “flow” dynamically on its own? Any other suggestions on how to do this?

Well, ho-leee farkbunnies. That’s cool.
And the answer is yes.

The basic approach is to use SVG or canvas to draw the lines, but figuring out the calculations for the anchor positions, and how to elegantly curve the line… I don’t have enough beer in my fridge for that level of creativity.

Fortunately some daft coder[s] by the name of anseki had plenty of beer, and wrote a cool library called Leader Line which works ridiculously well.

EDIT: Here’s the official documentation site check out those features!

Here’s a quick demo of what I built with it;

https://leader-line.webflow.io/

You basically ID your elements, and then connect them with a line of script. I like to complicate things though, so my list is CMS sourced, and randomly sorted, So I’m ID’ing them after the page loads.

Here’s the read-only project link to see how I’ve assembled it;

https://preview.webflow.com/preview/leader-line?utm_medium=preview_link&utm_source=designer&utm_content=leader-line&preview=e57f79ba3614b4dfc4e92be383e3f120&workflow=preview

As well as the codepen where I’ve integrated the library.

1 Like

Wow, that looks perfect. Not sure about influencing the bend and stuff but that’s a thing for later :slight_smile:

I’m more of a designer than coder, so do I get this right: I have to host the actual code of the Leader Line somewhere? Like Codepen? And then give the elements in Webflow an ID and point everything to the hosted code?

It’s not much code, and it can all go into your </body> custom code section of your page. I’m referencing the library from a CDN.

Let’s assume you’ve ID’s the images as;

  • leader-img-1
  • leader-img-2
  • leader-img-3
  • leader-img-4
  • leader-img-5

Then a basic implementation in your code would look something like;

// This references the library from a CDN
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/leader-line-new@1.1.9/leader-line.min.js"></script>

<script>

// Draw a line between two elements,
// from the bottom of the first, to the top of the second
function drawLine(e1, e2) {

  // Lots of options - https://anseki.github.io/leader-line/
  var line = new LeaderLine(
    e1,
    e2,
    { dash: { animation: true }}
  );
  line.setOptions({startSocket: 'bottom', endSocket: 'top'});
  line.color = 'red'; // Change the color to red.
  line.size++; // Up size. 

}

$(function() {

  // Draw our connecting lines 
  drawLine (
        document.getElementById(`leader-img-1`),
        document.getElementById(`leader-img-2`)
  );
  drawLine (
        document.getElementById(`leader-img-2`),
        document.getElementById(`leader-img-3`)
  );
  drawLine (
        document.getElementById(`leader-img-3`),
        document.getElementById(`leader-img-4`)
  );
  drawLine (
        document.getElementById(`leader-img-4`),
        document.getElementById(`leader-img-5`)
  );

});

</script>

https://leader-test.webflow.io/

Hi @memetican !

Thanks so much for this post, I’ve been looking for a way to make a mind map in Webflow and think this could be it :slight_smile: I’m just testing out the code you have there by giving my images in-page IDs — only problem is I seem to get a different position of the lines each time I hard refresh! Just wondering if this was an issue you’d come across or if I’d implemented incorrectly.

Any help appreciated!

Hi Em, if you mean that they are randomly choosing which “side” of your photo to extend from, read up on those setting options for how the line anchors. It gives you full control over that.

1 Like

This is brilliant - thank you. Exactly what I was looking for.

Is there a way to hide lines in mobile view?

Hi Thomas, yes it’s script-based, so you can apply different effects based on the breakpoint.

I didn’t write this library but what you’d want to look for is a way to switch the lines on/off, even if it’s just changing the opacity setting.

Then you’d use that together with media observer to detect breakpoint changes in script, and apply your changes accordingly.

That part I’ve built here. and It’s specific to Webflow’s breakpoints;

Thanks, Michael! That’s really helpful.

I have implemented LeaderLine on my site, and for the most part it works really well. However, sometimes when I open my site - usually on a different browser - the lines appear out of place i.e. they are further up the page and aren’t connected to their elements. Why might that be?

Hi Thomas, I haven’t seen this behavior.

I didn’t author this library. so I can’t give you any direct advice, but I’d look in the docs for a FAQs or troubleshooting section and recheck your code. In particular I’d check to make sure your code is running after the page has loaded.

If you’re seeing the problem at page load, it suggests that the page isn’t fully drawn and the elements aren’t fully positioned when the library draws its lines. This could also happen if you have lazy-loaded images, and the lines are drawn below them. They won’t load until they scroll into view, so the position of the elements beneath them will change as the page is scrolled.

If you still can’t figure it out, check whether they have a support email or forum. Stack Overflow can be a good place to ask library-specific questions as well.