Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tanken Bak

Draw line from Clicked element to point

Recommended Posts

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 :D

example.thumb.jpg.089729a8b90f2d25c34dec1855337cb8.jpg

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 :P 

Link to comment
Share on other sites

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).

  • Like 2
Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

 

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!

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.
×