I know a similar question has been asked before, but I think my case is a bit different and I couldn't find a solution.
In the pen I posted I have a very long image which I want to scroll from the beginning to its end, which mean that it should stop when its right edge reaches the right side of the window. In order to do this I calculate the distance, so the amount of x translation, as the difference between the image width and the window width. I know about the xPercent property, but I guess that it's not useful in this case, because I have no way of using it account also for the window width.
Anyway, the animation works fine. But if after the first animation you resize the browser window and click repeat (top right corner), the image doesn't stop at the right point: it goes too far left, or too far right, depending how you resized the window.
So, I'm thinking that the solution would be to update the values inside the tweens on the window resize event. I'm not sure how to to this, or if that's even possible. Is there a better, more appropriate, approach?