Move object a percentage along bezier line

[Carrly]

Hi, 

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

 

[Carl]

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.

 

https://greensock.com/docs/TimelineMax/tweenTo

 

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

 

 

 

[Carrly]

That's great! Thank you 

 

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