Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Carrly

Move object a percentage along bezier line

Recommended Posts

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

 

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.

 

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

 

 

 

  • 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.
×