Sackadoo

Thanks, Blake. That sounds like very reasonable advice.

Thanks for pointing that out. It might have taken me quite some time to realize that. Yup.

Thanks for replying, Blake. If memory serves, I followed a link in a forum thread, maybe even here on this forum. The guy you did the demo for, I remember him being impatient. Hope that helps narrow things down. I'd like to know which part(s) of your code deal with these three areas: drawing the bezier curves, maintaining/updating those curves while the nodes are moving, and moving the nodes themselves. I did notice that you seem to be drawing the connectors on a layer separate from the nodes (Processes)... or did I misinterpret that? For all I know, all these things may be handled by GSAP. I'm assuming API calls are easy to spot in your code via naming conventions, but it might be helpful to know what prep work you did prior to making the calls. The end goal as far as these mechanisms are concerned is to be able to add/delete nodes as well as connections under user control. In case you're interested in what I'm up to... It's a story-planning app, index cards on a multi-level corkboard, a simulation of that. The input and output sockets would be to make connections between threads and across corkboard levels. To be developed in Typescript/Electron.

Thanks, Carl. That gives me a place to start.

I came across this on CodePen last week and I've been digging around to better understand it ever since. Not getting very far very fast. I'm new to GSAP and SVG (which may be 90% of the problem) and what I'm trying to figure out is what's going on behind the drawable connections. If not a tutorial, just a quick pseudo-code summary of how this is implemented might be enough.