I have some stuff I moved from jQuery and a jQuery flowchart library to custom code, and then came across GSAP and have been amazed.
I'm trying to move the following functionality and not sure of the best way to accomplish it:
I have a series of nodes, each with an input and an output.
Connected to each input and output are one or more svg beziers that connect to other nodes.
When I move a node I want to also move the beziers.
This is in react but that's not really important - I could convert from whatever.
Currently, when a node moves it updates its top and left, causing the lines to move.
Moving to GSAP I can get the details of the move, but aren't sure on best practices.
Because you use transforms for performance I can update top and left and so the links don't know anything has changed.
I thought maybe to call the update function?
Or should I measure the translate offset somehow?
I struggled a bit earlier today as I had the code inside the component which caused it to get rerendered when top and left got changed - causing the draggable to get recreated.
I've now moved it up a level and it seems better but I'm not sure on the best way to redraw the links?
If top and left changed it would be fine, but with translate the sub components don't know anything has changed.
I guess I'm asking: "when an element is dragged, how do you update associated elements"?