hugo_rune Posted November 27, 2019 Share Posted November 27, 2019 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 Link to comment Share on other sites More sharing options...
hugo_rune Posted November 27, 2019 Author Share Posted November 27, 2019 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 Link to comment Share on other sites More sharing options...
OSUblake Posted November 27, 2019 Share Posted November 27, 2019 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 5 Link to comment Share on other sites More sharing options...
hugo_rune Posted November 27, 2019 Author Share Posted November 27, 2019 Yup, maxxes out at 214748 which works, 214749 goes to -214748 Link to comment Share on other sites More sharing options...
hugo_rune Posted November 27, 2019 Author Share Posted November 27, 2019 Thanks OSUblake! I was having fun with that though Link to comment Share on other sites More sharing options...
OSUblake Posted November 27, 2019 Share Posted November 27, 2019 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 Link to comment Share on other sites More sharing options...
TiagoFonseca Posted November 28, 2019 Share Posted November 28, 2019 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 Link to comment Share on other sites More sharing options...
OSUblake Posted November 28, 2019 Share Posted November 28, 2019 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. Link to comment Share on other sites More sharing options...
TiagoFonseca Posted December 3, 2019 Share Posted December 3, 2019 Adding this line inside my Vuejs component solved it: import * as gsap from '../vendor/gsap-latest-beta.min.js'; Thanks! Link to comment Share on other sites More sharing options...
OSUblake Posted December 3, 2019 Share Posted December 3, 2019 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. Link to comment Share on other sites More sharing options...
OSUblake Posted December 3, 2019 Share Posted December 3, 2019 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. Link to comment Share on other sites More sharing options...
TiagoFonseca Posted December 3, 2019 Share Posted December 3, 2019 This works fine: const tl = new gsap.TimelineLite() tl.to("foo", { x: 100}) Link to comment Share on other sites More sharing options...
OSUblake Posted December 3, 2019 Share Posted December 3, 2019 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() 1 Link to comment Share on other sites More sharing options...
TiagoFonseca Posted December 3, 2019 Share Posted December 3, 2019 That makes sense, and it will simplify my code. Thanks again! Link to comment Share on other sites More sharing options...
EugeneStashuk Posted January 16, 2020 Share Posted January 16, 2020 @ZachSaucier Hello. Have met the same problem with counting big number. When gsap v.3.1.0 is planning to be released? Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 16, 2020 Share Posted January 16, 2020 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. 1 Link to comment Share on other sites More sharing options...
EugeneStashuk Posted January 22, 2020 Share Posted January 22, 2020 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 1 Link to comment Share on other sites More sharing options...
OSUblake Posted May 28, 2020 Share Posted May 28, 2020 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now