GSAP icon indicating copy to clipboard operation
GSAP copied to clipboard

onRepeat not getting getting called when time is close to a multiple of the duration of a tween

Open mdatsev opened this issue 5 months ago • 3 comments

When the time lands on values that are close (but not exactly equal) to a multiple of the duration of a tween, the onRepeat call will not be called.

Here is an example:

gsap.to({ x: 0 }, {
  x: 100,
  duration: 3,
  repeat: 4,
  onRepeat: () => {
    console.log("Repeat called!");
  },
});

for (const time of [
  0, 1, 2, 3, 4, 5, 6.0000001, 7, 8, 9.0000001, 10, 11, 12.5, 13,
]) {
  gsap.updateRoot(time);
}

In this case we see only 2 console.log's (when the time reaches 3 and 12.5 - which are either equal or after the repeat time), but we expect 4 console.log's (also when the time is close to 6 and 9).

Here is a full reproduction example: https://codepen.io/mdat/pen/wvLOMwV And here is an example with other slightly changed time values which works as expected (called 4 times): https://codepen.io/mdat/pen/qBzvNGp

This might not seem important for a real-world application, but if the framerate is consistent and we happen to choose a duration which is multiple of it, it is quite possible to sometimes land on a value this close to it and get unexpected behavior. Which happened to our team and it was quite difficult to debug.

mdatsev avatar Sep 10 '24 18:09 mdatsev