Jump to content


onComplete doesn't stick the landing

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

Here is a tween counting down from 1 to .1 on a generic object, but never quite sticks the landing.


I suspect there is a flag or option I am overlooking.


See the Pen GgXvQx?editors=101 by jedierikb (@jedierikb) on CodePen

Link to comment
Share on other sites

It's not a bug in GSAP - it's just a quirk in binary systems and the way numbers are represented. The way a tween works is that it'll figure out the difference between the starting and ending values (in this case, -0.9) and then over the course of the tween it'll add a portion of that number to the starting number. So at the end of the tween, it'd multiply 1 by that difference and add it to the start. But try this:

console.log(1 + (-0.9 * 1));

You'd expect 0.1, right? But you'll see something like 0.099999999999999. I know, on the surface it seems bizarre but it's how binary systems work with these numbers.


Make sense? 

  • Like 4
Link to comment
Share on other sites

In this link you'll find some explanation about it:




My suggestion is to round at certain point and leave like that.


My guess is that this could be connected to the fact that repeating 0.9 is equal to 1,   :shock: ??!! #$%/&&??!!!!!:

0.999999999999999999999999999999... = 1

This is a vast and complex mathematical issue that can bend your mind real quick, but if you like maths you're going to find it fascinating:




Finally this is the simplest explanation to it:




My guess is that this two might be connected. I don't know enough about computer science and how the math part of the binary system is build, but my guess is that in order to simply make things work in extensive and complex calculations, specially when repeating series come into the scene, this has to be "included" so to speak. In fact in real life the electron, and many other particle wave  theories, are demonstrated based on this theory.


Of course Jack or someone else with more knowledge in the area could confirm that the two are connected or not.

  • Like 6
Link to comment
Share on other sites

Interesting resources, Rodrigo. Thank you.

Link to comment
Share on other sites

Thanks for the explanations and pointers!


Unfortunately, this issue is causing some of my tweens to run into problems. as the completed tween values are not _quite_ the same as the target values and == checks come back negative.  


I've worked around this issue with this approach, so I can continue hacking along happily:

See the Pen OPoQBJ?editors=101 by jedierikb (@jedierikb) on CodePen


I am wondering if there is a flag in greensock I could set to get the same behavior?

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.