So I'm trying to animate some "items" across the screen from right to left which I successfully managed but I am now trying to get the animations to stop when you hover your mouse over the items then start animating them again when the mouse is moved. I have successfully managed to stop the animation on hover but when resuming I can't get the items to move at the same speed. It seems the earlier items get slower and the later ones start overlapping them. 

Here is what I have:  https://jsfiddle.net/dgLxL2tr/3/

I print out the time variable used of how the long the animation should last, the translate value and a confirmation of the velocity. These numbers seem correct to me but they are not moving at the same speed.

If someone can push me in the right direction or find a solution that would be amazing!

Thank you.