Tween up/down through a list of numbers

[smallio]

I've done most of the hard lifting here, instead of going +5 or -5 I want to be able to cycle through a list of numbers with no correlation to each other-

 

var numbers = ["330",  "477",  "20",  "128",  "8"]

 

Preferably I'd like to count up/down between values in the thousands/millions, so a big bonus would be to represent them with a k or and m at the end. 

 

For Example:

var numbers = ["330",  "477",  "20",  "128",  "8"]

var values = ["k",  "k",  "m",  "k",  "m"]

 

But outputting like: (number, value) or 330k, 447k, 20m etc... 

 

I've stripped down the example to like 20 lines of code to it's easy to see what's going on. My guess is I'd have to do the k/m separately and output in a separate field next to it, if there's an easier way I'd love to know though! 

 

Cheers,

Will 

 

See the Pen jZQjJV?editors=0010 by smallio (@smallio) on CodePen

[Acccent]

This isn't strictly GSAP, more of a general JS question. Is this what you were looking for?

 

See the Pen bLQXeB?editors=0010 by Acccent (@Acccent) on CodePen

 

[smallio]

Spot on @Acccent thank you!

[smallio]

I'll do the same for the k/m and that should work perfectly!

[Acccent]

If you want it to be fancy, when going eg. from 20km to 20m, you could make it tween down to 1 and have an onComplete callback that changes "km" to "m" and starts a new tween from 1000 to 20

 

edit: I just realised I invented "km" ! oh well, the logic still works with m and k

[smallio]

2 minutes ago, Acccent said:

If you want it to be fancy, when going eg. from 20km to 20m, you could make it tween down to 1 and have an onComplete callback that changes "km" to "m" and starts a new tween from 1000 to 20

 

Oooo nice idea!!! I'll see if I can implement that

[Sahil]

Here is how you can do it, if you don't want decimal points there is line you can uncomment. Also noticed slight issue with logic in @Acccent's demo, numbers won't animate on first click if you click back and forth on both buttons.

 

See the Pen BYGXBj?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

[smallio]

10 minutes ago, Sahil said:

Here is how you can do it, if you don't want decimal points there is line you can uncomment. Also noticed slight issue with logic in @Acccent's demo, numbers won't animate on first click if you click back and forth on both buttons.

 

See the Pen BYGXBj?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

 

I feel like I'm a parrot at this stage just repeating thank you to some of you guys, but seriously, THANK YOU!!!  You don't even know how much I appreciate the contributions. Things like this can take hours for a noob like me to figure out & being able to see stuff like this is totally invaluable. Gratz on mod status & Superhero as well btw. 

[Sahil]

@smallio plan is to make you fly, be it as superhero or as parrot.