Jump to content


curve a line

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've been trying to find a way to have a drawn line gradually (tween) curve itself until it reaches an arbitrary arc. I've been attempting this with easeljs and created a post for it:




but I'm not really happy with how it looks or how much control I have over the tweening. I was wondering if anyone has tried to animate the change from a line into a curve (so it looks like the "straight face" is slowly changing into a "smile" or "frown").


I used to do this kind of thing fairly easily 10 years ago with Flash tools, but I'm having a hard time doing it now in Javascript. Can anyone point me in the right direction to do this with GSAP?



Link to comment
Share on other sites

Here is a fiddle I made awhile ago when the BezierPlugin was first released:



I'm using the KineticJS library which has a ton of features and tutorials.

Basically this shows that you can move bezier control points (the blue circles) and have the bezier curve update. You could probably animate the position of one of the anchor or control points on a curve and have the curve constantly redraw.


See this demo here: http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/


I think the red curve's control point that you can move with the mouse would be a good starting point, you would just animate that control point with TweenLite instead of waiting for the user to drag.


In summary, For drawing the arc I would KineticJS and if you needed to animate the control or anchor points use TweenLite. If you need an object to animate along a curve, then the GSAP BezierPlugin would be great for that

Link to comment
Share on other sites

Thanks for the great idea! I hope to try this out soon...

Link to comment
Share on other sites

  • 1 month later...

I finally got around to looking at this stuff again...anyway, I looked at the sample code and the output and I agree that the red curve is basically the type of curve I want to modify the control points for, except in an animation. I see you suggested that I use TweenLite to animate the control or anchor points, but I'm just not catching on enough how to do that. Can you give me some advice or code samples as to how I would do that? How do I get TweenLite to animate a KinectJS drawn curve by moving its control points?


Link to comment
Share on other sites



I can't get too deep into the finer points of KineticJS. The fiddle I provided probably has a bit too much code in it related to the interactivity and updating the display of all the elements that doesn't pertain to your exact needs.


to see how TweenLite can tween the position of a control point just add this code to the very bottom of the script in the fiddle linked above:


//update the actual control point's x value that is used by the bezier curve


TweenMax.to(cp1, 1, {x:400, repeat:10, yoyo:true});
//update the position of the UI handle for the first control point
TweenMax.to(circleCP1, 1, {setX:400, repeat:10, yoyo:true});
You will see the curve animate, but I didn't add any code related to the tween of the blue triangle
Link to comment
Share on other sites

Ok, that makes sense. I have another question but I'll start a new thread for that because it's an entirely different topic.


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.