Jump to content
Search Community

Tween Value with Decimal

jjvera 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

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

  • 10 months later...

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

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