Jump to content


Move object a percentage along bezier line

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 have a path with a circle going along it using MorphSVG with Bezier. When you press 'play', the circle follows the path to the end as expected. However, I want the circle to stop at the top of the curved line, so like 70% along the path. Is this possible?


See the Pen vpwBEW by Carrly (@Carrly) on CodePen


Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Looks like you posted in our archived Flash forums (moving this post to HTML5). No biggie.


Thanks for the demo. Very nice.


You have some options here. 


Every animation has a progress() method that you can actually tween. The progress (value between 0 - 1) represents how much of the animation that is complete where 0 = none, 0.5 = half, 1 = fully complete.


To tween the progress of a timeline named tl you can do


TweenLite.to(tl, 1, {progress:0.5})// animate to a progress of 0.5


Read more about the technique of "tweening a tween" (or timeline) read: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca




You can also call tweenTo() on a TimelineMax timeline like


tl.tweenTo(5) // tweens to 5 seconds.




I modified your demo to show both techniques.

Press the "reset" button after each animation


See the Pen goJBYo?editors=1010 by GreenSock (@GreenSock) on CodePen




  • Like 4
Link to comment
Share on other sites

That's great! Thank you :-D


I added a couple Labels and an extra tween, and noticing the progress button won't work in this scenario. Essentially I'd like to click a "next" button and the circle move forward/backward along the line. It looks like I'm unable to tween that circle on the bezier line more than once. Is that right?



See the Pen rpgRmz by Carrly (@Carrly) 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.