Jump to content
Search Community

Move associated items with draggable

Matt Riddell test
Moderator Tag

Recommended Posts

Hi,

 

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 it47263614_ScreenShot2020-09-30at20_21_07.thumb.png.1ae25cc3a0ee65a91e736ce944d33276.pngs 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"?

Link to comment
Share on other sites

Welcome aboard, @Matt Riddell! Glad to hear you're enjoying the tools. 

 

First of all, did you know that you can set a Draggable to type: "left,top" and it'll use those to move things instead of transforms? I'm not saying I recommend that because obviously those properties affect document flow (thus performance isn't as great), but if it makes your development faster, it's an option. 

 

As for using transforms and updating your Beziers, that should be totally doable but I'm really not sure how you have things set up and your question is pretty broad so I'm not sure exactly what to say. You'd have a much better chance of getting a solid answer if you just create a SUPER reduced case like with only two nodes and 1 connector, in CodePen or something, and let us see what you're doing. Check out https://greensock.com/demo for more details about creating a minimal demo. We'd love to help with any GSAP-specific questions. 

 

You may even benefit from advanced features like MotionPathPlugin.convertCoordinates(). There are some useful nuggets in GSAP that not a lot of people know about because they're pretty niche. 

 

Happy tweening/dragging!

  • Like 2
Link to comment
Share on other sites

Hah reason! Cool!

 

Thanks to both of you!

 

GSAP is awesome - I just dropped all my positional code, seriously I deleted like a thousand lines of code and everything is so so much simpler, smoother and much easier to read for other developers!

 

I'm in awe at the convertCoordinates and the relative position functions.  I had my own and any time I changed something they'd have issues.

 

You have no idea how cool it is to offload that thought process to you guys 😂 

 

Thanks again!

 

Super happy customer - well worth the spend!!!

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

Yay! That's so great to hear, Matt. Yeah, converting coordinates is quite a headache. It took me a long time to build something that'd work well across browsers, SVG & non-SVG, etc. That must have felt good to delete thousands of lines of code :)

 

I love hearing that you feel the Club GreenSock membership was worthwhile. Thanks for taking the time to offer some positive feedback. 🙌

  • Like 2
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...