Jump to content


Percent tween converted to pixel value on completion

Moderator Tag

Recommended Posts

I am tweening a fixed position div's left position between two percent values using .from().  During the tween it acts as expected and tweens the percents.  However, in Firefox, once the tween completes, the percent value is converted to a pixel value.  This does not happen in Chrome.



Link to comment
Share on other sites

Some further clarification.  It appears to be specific to .from().  If I use .to() it remains a percent after completion.  Changing to position absolute from position fixed makes no difference either.  Also seeing this in IE9.  

Unfortunately, I can work around this using .to() because I'm using media queries for a responsive design and I need the end positions to be defined there.

Link to comment
Share on other sites

The issue just has to do with the way the browser reports current values with getComputedStyle(). When you do any tween, the engine must discover what the current value is and then the destination value so that it can interpolate between them. So if the browser says your object is currently at "100px", for example, and you're animating to "50%", GSAP is smart enough to translate the px into % and do the tween, but it always remembers the starting and ending values EXACTLY so that it honors them as-is. In the example above, if you reverse() the tween so that it goes back from 50% to 100px, when it's done it should ensure that it honors the original ("100px") instead of the translated % (like "21.5%"). Otherwise, it could break things that you have in place like maybe the user resizes the window but you've got things that are lined up exactly 100px from the side. 


So this is a browser issue, not a GSAP issue. That being said, I just uploaded a new version of CSSPlugin (and TweenMax) that implements new logic, assuming that if you define a percentage-based value, both starting/ending values should likewise be forced to % (because I think that's probably the more common scenario). That should resolve things for you, but let us know if it does the trick.


http://www.greensock.com/gsap-js/ (or Club GreenSock members can get it from their GreenSock account at https://www.greensock.com/account/)

Link to comment
Share on other sites

Works great!  Thanks for the quick response.

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.