Jump to content

Oscar Rottink

Animate a curved line between two points naturally

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

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.