Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Animate Left on Resize

Recommended Posts

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

Link to comment
Share on other sites

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


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.