trych Posted December 15, 2021 Share Posted December 15, 2021 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 More sharing options...
iDad5 Posted December 15, 2021 Share Posted December 15, 2021 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 More sharing options...
trych Posted December 15, 2021 Author Share Posted December 15, 2021 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 More sharing options...
iDad5 Posted December 15, 2021 Share Posted December 15, 2021 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 More sharing options...
OSUblake Posted December 15, 2021 Share Posted December 15, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now