Jump to content
Search Community

Connecting moving nodes with lines

modulareverything test
Moderator Tag

Recommended Posts

I've been asked by a client if we can create something similar to the attached screenshot. I'm sure I've seen an example of something similar somewhere which used some kind of method to calculate the start/end positions of the lines but I can't find it. So far all I've done with gsap is some simple transitions so this is definitely taking it up a notch for me.

 

Any pushes in the right direction would be appreciated.

 

The general idea is that the images would move around and the lines would stay 'attached' in the same position.

There's also a line of text which I see as a 'nice to have' — I'm sure there are ways we could work around that if it wasn't possible.

Link to comment
Share on other sites

Sounds like a great opportunity to up your creative coding and GSAP skills!

 

Unfortunately we don't really have the resources to build out the project for you, but it looks to me like this would be very doable with SVG or even canvas (though most people find canvas more difficult to work with). The lines go from the center of each image which should be pretty easy to find...

  • I'm not sure how you're building this or what the requirements are, but you could use regular DOM elements like <img> for everything except the connecting lines (which would be SVG) OR you could build it all in SVG. 
  • If your images are <img> elements, use getBoundingClientRect() to figure out locations and the center points so that you can plot the lines.
  • If your images are in the SVG, it's even simpler because you'll have the coordinates already or you can use getBBox() 
  • As for keeping the lines connected during the animation, you can just have a function that is in charge of plotting/drawing the lines, and you'd call that function in an onUpdate from your tween/timeline.

Good luck!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...