Animate Left on Resize

[buttontobutton]

This might not the right forum, but would appreciate any thoughts.

 

In my codepen I am animating a div with an image in it. The issue is that I am animating my div left from 100% to -100%.

 

However -100% is WAY longer than when the rightmost edge of the div is off of the screen, adding extra time. I essentially want it to end up at right: 100%.

 

Is there a way using CSS to get it to stop at the equivalent of right: 100%, but while animating left?

 

I was able to solve the issue by calculating the values dynamically on window.resize and killing and redeclaring the tween. Surely there has to be a better way?

 

Thank you.

See the Pen ZKJaKe by anon (@anon) on CodePen

[OSUblake]

Animating left/top is slow and choppy. And sometimes recalculating stuff on resize is the only way to go. But for this, you can animate a wrapper element like this...

 

See the Pen eWyYyp?editors=0010 by osublake (@osublake) on CodePen