Jump to content
GreenSock

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

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 post
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 post
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.

×