Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Abarth

Animate a line going from point A to B

Recommended Posts

I've recently got lucky with an answer from PointC in another thread, and now having spent a few hours researching without luck on another matter, I guess I'll try my luck again.

 

The problem: I have 30 points, each with a X and Y value (DIV's with a Top and Left setting), placed around a map of 1536x1080px.

A user can select any of these points, and when that happens, a line should be drawn (animated in) from one point, to the selected one.

 

This seems really straight forward, and to some extend I have managed to do that, with canvas drawing (p5.js), but it turns out extremely unsharp, and seems to be way to complicated, for what it should do, I've even tried just creating a DIV, and animating on it's width, thereby faking a line.

 

I'm assuming maybe the GSAP SVG animation tools can solve this, but had no luck finding it, it's all about pre made SVG files from illustrator, which then are masked in animations, I can't do that, seeing as I have too many points, and never know how many new ones will be created.

 

Any good solutions to this? It seems to simple, to be this complicated :S

 

/ Chris

See the Pen RppBaY by Abarth77 (@Abarth77) on CodePen

Share this post


Link to post
Share on other sites

It would be great to see a demo of what you've done so that we can gauge what is too unsharp about p5.js

 

You should get really crisp lines from SVG and you can inject <line> or <path> elements dynamically and update their values to animate them with GSAP.

 

 

 

there are plenty of tools out there to help you dynamically create SVGS too D3 is pretty popular:

http://bl.ocks.org/paulovn/9686202

http://christophermanning.org/projects/building-cubic-hamiltonian-graphs-from-lcf-notation

 

 

Pixi is another canvas library and here is a demo I found http://jsfiddle.net/tahirahmed/jy156qox/

 

 

Blake Bowen does a lot with animated lines in both SVG and canvas. Great results!

 

http://codepen.io/osublake/pen/vXZPxN (move circle)

http://codepen.io/osublake/pen/RrBXxB (move circle)

http://codepen.io/osublake/pen/QKYGyo

http://codepen.io/osublake/pen/yakOjY

  • Like 2

Share this post


Link to post
Share on other sites

I wrote in this forum thinking I could easily animate this using some attr animation obviously, but thanks to Carl, I got a nice reminder of snap.svg which solved the problem for me with 9 lines of code, thanks Carl.

 

And thanks for this awesome forum, the good atmosphere and kind members.

 

See the Pen RppBaY by Abarth77 (@Abarth77) on CodePen

 

 

Share this post


Link to post
Share on other sites

Just in case anyone reads this and wants to go a little deeper, I have a related question from a few weeks ago, similar use case: 

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×