How do I make those arrows always point to a target

[Willyakabi 0 Likes (Newbie)]

Hi guys ! I'm still learning how to make this animations and I'm still very newbie, and I having some trouble to structure my layout.

Spefically, those arrows in the image, it should always point to that word resposively. How can I do this?  

 

[Carl 11,324 Likes (Superhero)]

HI and welcome to the GreenSock forums,

 

That's a pretty tough question. There really isn't anything in GSAP that is going to handle that for you. I suspect your best bet is to use SVG and re-draw a Bezier path based on the relative positioning of the circled word and the word with that the arrow points to. Performing those calculations could be quite a challenge from what I understand.

 

Do you have any of this in place in yet? Do you have a CodePen demo we could look at? Being that this is pretty far beyond the GSAP API, I'm really not sure how much help I can be but someone might have some suggestions. 

 

Please see the demos from @OSUblake at the end of this thread: 

They allow you to draw connecting lines between elements and then drag the elements around.  A bit similar to what you describe.  

[Willyakabi 0 Likes (Newbie)]

Wow, that was a quick response, yes I was reading that topic... And what I trying to figure it out is to set the position of  the nodes, can I set in  <span> or in a specific element position? 

See the Pen PJzwyW by willyakabi (@willyakabi) on CodePen

 

[Carl 11,324 Likes (Superhero)]

Sorry, I'm really not sure how you would do that. It seems quite complicated to me.

[OSUblake 18,533 Likes (Superhero)]

Hi @Willyakabi

 

I would have an SVG cover the entire area, figure out where your words are located using getBoundingClientRect or getClientRects, and draw stuff based on those coordinates.

[OSUblake 18,533 Likes (Superhero)]

Example of what I was talking about. It probably won't be easy to understand. I didn't add an arrow head, but you can do that using a marker.

 

See the Pen LzzjLw by osublake (@osublake) on CodePen

 

[mikel 4,782 Likes (Superhero)]

Hi @OSUblake,

 

Fascinating logic. As always very instructive.

 

I like it:

See the Pen RLLxbb by mikeK (@mikeK) on CodePen

 

Thanks

Mikel

[OSUblake 18,533 Likes (Superhero)]

Thanks!

 

Preventing the path from intersecting with the words would make it a lot more complicated, so I just used a simple arc path. Here's a draggable demo showing it how it works.

 

See the Pen GMMyNo by osublake (@osublake) on CodePen

 

 

[OSUblake 18,533 Likes (Superhero)]

Oh, I just noticed your fork. Good idea!