Jump to content
GreenSock

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

Tween Value with Decimal

Recommended Posts

Hello! 
I need to Tween a number from 0 to 53,5. 
Is this possible with GSAP? I-m trying and i'm having problems to count decimal numbers.

 

    var obj5 = {value:0},
        element5 = document.getElementById("cantidadMujeres");
    TweenMax.to(obj5, 1.4, {value:"53,5", ease:Linear.easeNone, onUpdate:function() {
        element5.innerHTML = obj5.value;}});

 

This is my code, the problem is that the counting number has like ten or eleven digits when init.  And, if i add "roundProps:"value" " the decimal digit dont count.

 

The is some solution to this? Thanks

Link to comment
Share on other sites

Hi jjvera,

 

Welcome to GreenSock forums.

 

Just use a dot instead of a komma:  53.5

 

Happy tweening ...

 

Mikel

  • Like 1
Link to comment
Share on other sites

Thanks very much!! but i have an international problem :shock:

In my country decimal numbers are after comma, and thoundsend with a dot. When i use comma in the number doesn't tween. 

Link to comment
Share on other sites

Hi jjvera,

 

please take this line:  element5.innerHTML = obj5.value.toFixed(1).toString().replace(".", ",");

 

 

  • Like 5
Link to comment
Share on other sites

Solved!!!!

Incredible guys really appreciate your help. 

Thanks.

  • Like 1
Link to comment
Share on other sites

  • 10 months later...

Is there any way to add opacity to this animation? Such as, the number starts with opacity:0 and ends with the final number at opacity:1?

Link to comment
Share on other sites

Do you mean that you literally want to animate a string that says "opacity:0" to a string that says "opacity:1"? Or do you want to tween the CSS style "opacity" on an element from 0 to 1? Both are pretty easy, but I have a feeling I might be misunderstanding your question. Can you clarify?

 

And typically it's best to just start a new topic if you've got a question (this thread is from almost a year ago). 

Link to comment
Share on other sites

Thanks for responding. I realize this is an old post, but I happen to be using this TweenMax exactly as stated here, except that I would like to add an "opacity:0" to the beginning value of "0" and "opacity:1" to the ending value of "50." I'm not sure if it needs to be a TweenMax.fromTo, but if so, I can't get that to work. I'm also enclosing this tween inside ScrollMagic, but that shouldn't have any bearing on the tween itself. If you can help I'd appreciate it, as I'm new to animating with GSAP.

 

 var obj1 = {value:0},
     element1 = document.getElementById("countUp1");

countertimeline.insert(TweenMax.to(obj1, 1.4, {value:50, ease:Linear.easeNone, 
  onUpdate:function() {
     element1.innerHTML = obj1.value.toFixed(0);
  }
}) );

 

Link to comment
Share on other sites

So you literally want the string "opacity:0" to animate to "opacity:1" (not the CSS property of the element), right? 

 

And in the upcoming release of GSAP 1.20.5, you'll be able to leverage a new feature of roundProps that'll make it a bit easier: 

 

Is that what you're looking for? 

  • Like 1
Link to comment
Share on other sites

I guess I'm not explaining this properly. It might help if I explain what I'm trying to achieve, visually. My tween shows an animation of a number advancing from 0 to 50. I want it to appear like it's "fading up" while it animates, so that the "0" will have an opacity of 0 at the beginning of the tween and the "50" will have an opacity of 1, at completion. 

Link to comment
Share on other sites

So the actual counting number is fading in as it counts? Something like this?

 

See the Pen OZExgd by PointC (@PointC) on CodePen

Is that what you needed?

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

This is exactly what I need. Thank you so much! I am now happily tweening.

  • Like 1
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.
×