Jump to content
Search Community

Animate a line going from point A to B

Abarth test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
Share on other sites

  • Solution

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
Link to comment
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.

 

Codepen

 

 

Link to comment
Share on other sites

  • 1 year later...

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