Percent tween converted to pixel value on completion

[muaddoob 0 Likes (Newbie)]

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.

 

http://jsfiddle.net/brettm523/wX463/

[muaddoob 0 Likes (Newbie)]

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.

[GreenSock 8,117 Likes (Superhero)]

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/)

[muaddoob 0 Likes (Newbie)]

Works great!  Thanks for the quick response.