Jump to content
GreenSock

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

Problem animating decimal percentages

Recommended Posts

Hello angel.teran, and Welcome to the GreenSock Forum!

 

Have you tried using autoRound:false in your tween? .. It is part of the GSAP CSSPlugin:

 

Working example:

 

See the Pen yygNyj by jonathan (@jonathan) on CodePen

  • autoRound
    By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you'd rather disable that behavior, pass autoRound:false in the css object. You can still use the RoundPropsPlugin to manually define properties that you want rounded.
    ::
$(function() {
  var tl = new TimelineLite();
  tl.to("#lifebar > b", 1, {
    autoRound:false, /* add this */
    width: "50.5%",
    ease: Linear.easeNone
  });
  tl.to("#lifebar > b", 1, {
    autoRound:false, /* add this */
    width: "100%",
    ease: Linear.easeNone
  });
  tl.to("#lifebar > b", 1, {
    autoRound:false, /* add this */
    width: "50.50%",
    ease: Linear.easeNone
  });
});

:

Feel free to check out the CSSPlugin Docs.

 

Hope this helps! :)

  • Like 1
Link to post
Share on other sites
Hi Jonathan, thank you very much for your quick response!

 

But the problem doesn't seem to be resolved.

 

The first part of the animation is successful (width: 50.5%), but the latter does not (width: 50.50%), the only difference is a 0 at the end of the value. I think that is a correct value which should not cause problems.
Link to post
Share on other sites

Hmm..  I tested the above in Firefox 34 on Windows 7 (64-bit) and the animation became smooth.

  • Which browser and browser version are you seeing this on?
  • Which OS and OS version are you seeing this on?

Until then you could try animating scaleX instead of width.. so this way it will animate on a sub-pixel level by default since its a CSS transform.

 

See the Pen pvRJeZ by jonathan (@jonathan) on CodePen

 

This one uses TimelineMax:

 

See the Pen RNKPLo by jonathan (@jonathan) on CodePen

 

The above example uses scaleX to animate a progress bar with the GSAP onUpdate special property:

 

More info at the GSAP JS Documentation pages:

Thanks!

Link to post
Share on other sites

It certainly seems like you're reporting a legitimate bug here. It occurs with other units too e.g. "50.50px". Looks like there's a small error in the value parser.

 

Once the big guy sees this I'm sure he'll be able to weigh in.

  • Like 1
Link to post
Share on other sites

Thanks guys. We're looking into this. 

Link to post
Share on other sites

I see why it's happening, and yes, it's only because you're adding extra zeros to the right which is breaking the pattern-finding algorithm that was written to prioritize speed. I can switch to using a regular expression and it shouldn't impact things too terribly much speed-wise, but it's a bit of a bummer to have to do that. I'm curious - why are you passing in numbers with extra zeros?

  • Like 1
Link to post
Share on other sites

Hi guys!

 
Thank you very much for keeping an eye on my problem.
 
I'm using toFixed(x) function of Number to truncate a decimal number and sometimes leaves zeros on the right.
 
Your library is awesome, thank you very much for your work.
Link to post
Share on other sites

Hi angel.teran  :)

 

you can use one of these methods to remove extra zeros :

var n = 1.2045000000
var noZeroes = n.toString() // = 1.2045 

or

var n = "1.2045000000"
var noZeroes = parseFloat(n) // = 1.2045 
Edited by jamiejefferson
Numbers automatically truncate the extra zeroes (ex 1). parseFloat converts Strings to Numbers, truncating the zeroes (ex 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.

×