Some oddities with the "number animation"

[Yandex.Technologies LLC]

Good day colleagues!

I have some strangenesses with "number animation".

 

This is "0 to 30, by 1 sec." example at CP

 

And (- drumroll please -) - "0 to 188, by 1 sec." example at CP

See the Pen PowdrYb by belyanskii (@belyanskii) on CodePen

 

I expect to get all the numbers from 0 to 30 in 1 second, rather than getting a random number or the same number multiple times

Can you tell me where I made a mistake?

See the Pen BayOeep by belyanskii (@belyanskii) on CodePen

[OSUblake]

It's working correctly. I think your understanding of how animations work is a little off. An animation will update about every ~16.67ms, so the chances of it updating on every number change are practically 0. You would have better luck playing the lottery. 

 

To get it working like you want might take some work. You will need to make sure a number is not already in the array, and fill in any missing numbers between the last number in the array and the current number.

 

 

[Yandex.Technologies LLC]

50 minutes ago, OSUblake said:

It's working correctly. I think your understanding of how animations work is a little off. An animation will update about every ~16.67ms, so the chances of it updating on every number change are practically 0. You would have better luck playing the lottery. 

 

To get it working like you want might take some work. You will need to make sure a number is not already in the array, and fill in any missing numbers between the last number in the array and the current number.

 

 

 

Okay, so in order to show 30 frames per second, I need to set in what specific time to show the frame?

Like - 

See the Pen NWPLQwV by belyanskii (@belyanskii) on CodePen

[OSUblake]

Just use the TextPlugin.

https://greensock.com/docs/v3/Plugins/TextPlugin

 

gsap.to("#gsap", {
  duration: 1,
  ease: "none",
  text: {
    value: "0 1 2 3 4 5 6 7 8 9 10 11 12 13...",
    delimiter: " "
  }
});