Tween Value with Decimal

[jjvera 3 Likes (Newbie)]

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

[mikel 3,885 Likes (Superhero)]

Hi jjvera,

 

Welcome to GreenSock forums.

 

Just use a dot instead of a komma:  53.5

 

Happy tweening ...

 

Mikel

[GreenSock 12,851 Likes (Superhero)]

Is this what you're looking for? 

See the Pen 78ee40fe229c8a75df25848128db6ca5?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[jjvera 3 Likes (Newbie)]

Thanks very much!! but i have an international problem 

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

[mikel 3,885 Likes (Superhero)]

Hi jjvera,

 

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

 

 

[jjvera 3 Likes (Newbie)]

Solved!!!!

Incredible guys really appreciate your help. 

Thanks.

[marindee 1 Likes (Newbie)]

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?

[GreenSock 12,851 Likes (Superhero)]

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

[marindee 1 Likes (Newbie)]

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);
  }
}) );

 

[GreenSock 12,851 Likes (Superhero)]

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

See the Pen c2192ab9a49136cf0981db857d2f37bf?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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: 

See the Pen 58d23b3024c85e8171d73441f310132b?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

[marindee 1 Likes (Newbie)]

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. 

[PointC 11,423 Likes (Superhero)]

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.

 

[marindee 1 Likes (Newbie)]

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