Jump to content
Search Community

Problem animating decimal percentages

angel.teran test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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 comment
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 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.
×
×
  • Create New...