Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Oscar Rottink

Animate a curved line between two points naturally

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

you can define new path with something like this :

 



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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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.

×