Jump to content


Change animation target mid-tween

Recommended Posts

Hi there,


I am animating a shape towards another shape. However, during the tween there might be a user interaction that changes the target of this animation. In this case I would like to *smoothly* change the ongoing animation so it moves towards the new target. I don't quite understand how to achieve this. When I use separate tweens, then it (obviously) just interrupts the current tween and starts a new one from the current position, which does not look smooth at all (especially with an ease like expo.inOut).

In the codepen, when you first click the red target, the circle starts moving towards it. When you now click the blue target, while the circle is still moving, it starts a new tween that moves towards the blue target. I would like to change the setup so that clicking on the blue target continues the current tween, but lets it end at the blue target.


Any idea, how to achieve this?

Thank you!

See the Pen BawWLBE?editors=1111 by trych (@trych) on CodePen

Link to comment
Share on other sites

Hi, as far as I understand you, you want the tween to be deflected to the new target, but not change its' direction immediately  but with some kind o inertia applied to it?


Link to comment
Share on other sites

Yes, exactly. And ideally also in a way that does not "restart" the duration, so that the animation always finishes after 4 seconds, no matter what.

Link to comment
Share on other sites

Well, I don't think that there is an easy way to to this. But I might be proven wrong..)

 I would try it this way:

 When the path is deflected  I'd stop the old tween, remembering its current progress.

(try to )build a svg path that is curved towards the old target.(A path that has its' start-point at the current position , its' endpoint in the new target and is deflected at its start by a bezier-curve that has its' endpoint in the old target... I haven't a whole lot of practice with that, but it should be doable)

The new tween needs the duration set to the original tweens total duration mins the progress we remembered at the start.

 And it should probably render immediately....



Link to comment
Share on other sites

That type of animation is more of physics one, kind of like this demo where you update its position on every animation frame. 


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