Draw line from Clicked element to point

[Tanken Bak]

Hello, 

Im trying to create click points on image/svg, that will animate line and point to another element point.
As on image example if line is on building 1 and some one click building 2 or 3, line will go to clicked building.
Best wil be if it could move just ending point from one to another position, transforming whole line

That's my pen  but nothing exacting so far, I just create clicking area with callback, but I have no idea how to make this to work as it should.

Thanks for any help

See the Pen yLyyeyb by isuke01 (@isuke01) on CodePen.

[ZachSaucier]

Hey Tanken and welcome to the GreenSock forums. Thanks for being a Shockingly Green member! We couldn't do what we do without people like you.

 

My first thought about how to do this would be to use a standalone SVG rect (since you need to have a gradient fill) for that portion of the line. Then you set its transform origin to the left center and use rotation to get the angle correct. Then transform the length of the rect using scaleX to the appropriate length. Most likely this sort of thing would be best to do using fixed values that you preset - it would be tough to be responsive using such an approach.

 

Hope that helps! Maybe other people have other ideas of how to do this effect. 

[Tanken Bak]

Yep I update it a bit to make  transition, but still this color swap for part of line, I dont know how to ... 

See the Pen yLyyeyb?editors=1011 by isuke01 (@isuke01) on CodePen.

I have almost fixed this color thing with color blending, but safari says no thanks you

Also now I have to animate those dots in some nice way, and line part color in worst case will stay  

[ZachSaucier]

56 minutes ago, Tanken Bak said:

color swap for part of line, I dont know how to ... 

Set the stroke to a gradient. https://vanseodesign.com/web-design/svg-linear-gradients/

 

Then animate the gradient from all red to red and white as needed.

 

57 minutes ago, Tanken Bak said:

now I have to animate those dots in some nice way

I might just scale them in from 0 after the line has moved (or right before it finishes moving).

[mikel]

Hey @Tanken Bak,

 

Welcome to the GreenSock Forum.

 

Here two options to animate the lines:

 

See the Pen KKwwzbY by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

[Tanken Bak]

 

46 minutes ago, ZachSaucier said:

Then animate the gradient from all red to red and white as needed.

Aye, looks great, I'll try it
Thanks guys!