How can I change a target value while maintaining the same speed?

[trueicecold]

Hello all,

 

I've got an animation dropping a div by 200 pixels over 1.5 seconds. However, at some cases the end y position might change (become larger), so I would like to update the y property of the animation but keeping the same speed it was moving before the change. The change can occur at any stage of the animation, beginning, middle or just towards the end of it...

 

How can this be achieved?

 

Thanks!

[akapowl]

 

Hey @trueicecold

 

I think first off you would have to calculate the speed (the rate at which your div is moving a certain amount of pixels over time).

 

Then when that change-event happens you would have to kill-off the old tween, get the current-value of the property you were animating on that one and substract that from the value where you want it to go to instead, so you'll get the distance that it has yet to travel.

 

This value will be neccessary to calculate the new duration for your tween, which would be essentialy that amount-to-travel devided by the speed-rate you calculated for the initial tween in the begining. Then you'd set up a new tween with the new value for where to tween to and the new duration.

 

This will obviously only work for tweens without an ease applied ( so ease: 'none' ). I don't know if there is any easy way to get something like that working properly for tweens with eases applied - and if there maybe even is an easier way for tweens without eases. But it seems to do the job for those.

 

See the Pen 37eb9fdcfec4c365583dc6a58be01dda by akapowl (@akapowl) on CodePen

 

[trueicecold]

thanks a lot! I'm not using easing so it's a nice solution!