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>