How to adjust "to" parameters while the animation is in progress?

[Astarno]

I'm currently trying to shoot (move) little squares from one position to another. To achieve this, I am using Three.js for the drawing/rendering together with GSAP for the animations. My current code to perform the animation looks as follows: 

 

    gsap.to(obj.position, {
            duration: 1, 
            x: destinationObj.position.x, 
            y: destinationObj.position.y, 
            z: destinationObj.position.z, 
        })

 

It is possible that my destination object coordinates change during the animation. However, with my current code the object still moves to the old coordinates, which doesn't look nice. Is there a way to continuously update the destination coordinates during the animation such that my objects adjust their course when necessary? 

[GreenSock]

Hi @Astarno. It really depends on what behavior you're looking for. If you just want to redirect to new values and start the tween over, that's relatively simple and one of the best ways to do it is with a gsap.quickTo() or you could edit the properties directly on the tween's vars object and then call invalidate().restart() on it. 

 

If, on the other hand, you want to keep the timing the same so that if there's only 0.05 seconds left, for example, when your values change they'd suddenly move super fast to the new values over the 0.05 remaining seconds, that's more difficult but it's addressed in this thread with some solutions offered:

 

I hope that helps. If you still need assistance, please make sure you provide a minimal demo that clearly illustrates the problem. 👍

[Astarno]

I'll be experimenting with your suggestions tomorrow, thanks a lot for your reply! 

 

Just to answer your question: ideally I would like my objects to simply change their course and maintain their speed. I don't really mind about the timing of the animation, but I do mind about it looking smooth. So lets say they had to travel 10 units in 1 second. That would give them a speed of 0.1 units/s. After travelling 9 units, their destination suddenly changes and they have to travel another 5 units. Then I would probably want that animation to take 0.5 seconds. 

 

I have to see if it is worthwhile doing all these calculations though. 

If I need more help tomorrow I'll be sure to create a minimal demo. 

[GreenSock]

2 hours ago, Astarno said:

ideally I would like my objects to simply change their course and maintain their speed

That's relatively easy if you use ease: "none" (so that things are linear) because you can just do the math to calculate the new tween's duration based on the pixels per second. Otherwise, it'll be much more difficult with other easing. 

 

You could leverage InertiaPlugin (Club GreenSock membership benefit) to track the velocity of any property so that you can then smoothly continue that. 

 

Good luck!