Animate a curved line between two points naturally

[Oscar Rottink]

I was looking if it was possible to animate a curved line between two points so that if one point is dragged the line follows in a natural way. Like pulling a plug from your audio system and place it another place.

 

I know there are possibilities with bezier curves used as path and there is something like 2dphysics. But I want to know if such a thing is possible with GSAP.

 

After long time Google I found an example at http://www.jasondavies.com/animated-bezier/which is pretty much what I mean. 

 

If it's possible using GSAP, what are roughly the steps to take?

 

Just found another example: might be good start

See the Pen HrbKq by ayamflow (@ayamflow) on CodePen

[Diaco]

Hi OzBoz 

 

you can do that easily with svg paths :

 

https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths

[Oscar Rottink]

I was just looking into that. And I guess that if you drag one point you have to redraw the curve onUpdate ?

[Diaco]

yep , you can get dragged x/y and update the svg path points ( "d" attribute )

[Diaco]

you can define new path with something like this :

 

var newD ="M"+point1x+" "+poin1y+" "+"Q"+" "+poin2x+" "+poin2y+" "+poin3x+" "+poin3y ; 

[Oscar Rottink]

I did now change the attributes from the path with:

$("svg path").attr("d", "M10 80 Q 95 20 " + testPos.left + " " + testPos.top + "");

I do that within an onDrag function. That moves. Not really naturally but the basics work. Now I use a seperate DIV outside the <SVG> to drag. I guess it's much easier to make a transparant SVG shape to drage. Easier for the positions.

 

I have to play with it a bit more. Math isn't exaclty my thing but there must be some formulas around to change that center point so the feeling is a bit more natural. Not sure if you know Reason but something like this: 

 

And no need to help, I google but I need a start and that SVG thing is nice.

[Oscar Rottink]

I'm a bit further now, not sure how I can use GSAP. I tried some things but the results were weird. 

See the Pen MYwwdq by OzBoz (@OzBoz) on CodePen