Jump to content
Search Community

Animate a curved line between two points naturally

Oscar Rottink test
Moderator Tag

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 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.
  • Create New...