GSAP 3.0.1 Arithmetic error

[hugo_rune]

I've been trying to animate a number increment from 0 to 250,000

Interestingly, GSAP 3.0.1, once it gets above 214,000 (ish) it changes the number to a negative and counts down..

When using TweenMax (latest) the code functions as expected.

Here is a codepen of how it should work (using https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js)

See the Pen pooXMNQ by hugoartemisrune (@hugoartemisrune) on CodePen

And here is the identical code that doesn't work (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js)



Can anyone shed any light on this matter? I'm mid port to gsap 3 and wasn't quite expecting this behavior

Thanks, 
Hugo

for reference, the code in both examples is
 

var Cont={val:0} , NewVal = 250000 ;

TweenLite.to(Cont,1,{val:NewVal,roundProps:"val",onUpdate:function(){
  document.getElementById("counter").innerHTML=Cont.val
}});

 

See the Pen MWWMNJL by hugoartemisrune (@hugoartemisrune) on CodePen

[hugo_rune]

LOL bit of further info.. 32 bit int length is  2,147,483,647

If you set NewVal to 2,147,483 in the above gsap example, it not only forgets how to count, it goes totally spare and ends up as -1

[OSUblake]

This has been fixed in the next release. You can use this script in the meantime.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

See the Pen 0004f0c5cdd27f206af7b7cb47427c50 by osublake (@osublake) on CodePen

 

 

[hugo_rune]

Yup, maxxes out at 214748 which works, 214749 goes to -214748

[hugo_rune]

Thanks OSUblake! I was having fun with that though

[OSUblake]

4 hours ago, hugo_rune said:

Yup, maxxes out at 214748 which works, 214749 goes to -214748

 

I think it's because @GreenSock is doing some bit shifting in the rounding, so it's unsigned.

 

~~2147483647 // => 2147483647
~~2147483648 // => -2147483648

 

[TiagoFonseca]

Hi @OSUblake, first of all thanks for posting this solution, this error was driving me crazy.

I just have one question, I've installed gsap via npm and I'm using it inside Vuejs, so how would I go about adding this fix?

Thanks,
Tiago

[OSUblake]

You can use a browser script tag.

 

Or wait a few days. I think the next version will be released this weekend.

 

Or maybe @GreenSock can create an npm package for you. 

[TiagoFonseca]

Adding this line inside my Vuejs component solved it:

import * as gsap from '../vendor/gsap-latest-beta.min.js';

Thanks!

[OSUblake]

Oh yeah, I forgot that you can import umd/commonJS like that using if you are using wepack/rollup. I'm used to working in a es module only environment.

[OSUblake]

And I think importing gsap as namespace like that is a little weird because you would need to do stuff like gsap.gsap.to("foo", { x: 100 }). It might be working for you because that file is probably making gsap global.

[TiagoFonseca]

This works fine:
 

const tl = new gsap.TimelineLite()

tl.to("foo", { x: 100})

 

[OSUblake]

30 minutes ago, TiagoFonseca said:

This works fine:
 

const tl = new gsap.TimelineLite()

tl.to("foo", { x: 100})

 

 

I see. You are already using it as a namespace. Most people would do it like this.

 

import { TimelineLite } from '../vendor/gsap-latest-beta.min.js';

const tl = new TimelineLite();

 

But you don't need to use TimelineLite/Max. They are just aliases for gsap.timeline(). 

import { gsap } from '../vendor/gsap-latest-beta.min.js';

// Same as new TimelineLite/Max
const tl = gsap.timeline();

// Same as TweenLite/Max
gsap.to()

 

[TiagoFonseca]

That makes sense, and it will simplify my code. Thanks again!  

[EugeneStashuk]

@ZachSaucier Hello. Have met the same problem with counting big number. When gsap v.3.1.0 is planning to be released?

[ZachSaucier]

5 hours ago, estashuk said:

Have met the same problem with counting big number. When gsap v.3.1.0 is planning to be released?

The bug fix for this has already been released in GSAP 3.0.5. But GSAP 3.1.0 is planned to be released early next week.

[EugeneStashuk]

On 1/16/2020 at 4:18 PM, ZachSaucier said:

The bug fix for this has already been released in GSAP 3.0.5. But GSAP 3.1.0 is planned to be released early next week.

Thank you a lot) I thought I've checked v.3.0.5 but it was still 3.0.1 because it was inserted from another lib... So, 3.0.5 works great

[OSUblake]

On 11/27/2019 at 7:00 AM, OSUblake said:

I think it's because @GreenSock is doing some bit shifting in the rounding, so it's unsigned.

 

~~2147483647 // => 2147483647
~~2147483648 // => -2147483648

 

 

Fixed in latest.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

See the Pen 0004f0c5cdd27f206af7b7cb47427c50 by osublake (@osublake) on CodePen