# Counter

Go to solution Solved by Diaco,

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

Hi there,

I have just realised that Greensock can do counting! I am making a counter that needs to arrive at a phone number but is meant to look like a bomb timer.

Does anybody know how to make the counter...

• Start from 0 000 000 000 and count up.
• And possibly put some : in between the groups of numbers.

Thanks for any help,

Phil

See the Pen ojYVGz by phillip_vale (@phillip_vale) on CodePen

##### Share on other sites

• Solution

Hi Pusher

if i understood correctly what you're looking for , i think one of these methods can help you :

#1 :

```var distance = {score:0} , zero = [0,0,0,0,0,0,0,0,0,0] ,
scoreDisplay = document.getElementById("score");

TweenMax.to(distance, 10, {score:"+=1800222123", roundProps:"score", onUpdate:update});

function update(){
var N = distance.score.toString().split('');
if(N.length<zero.length){N.unshift(0)};
function R(x){ return N[x] || zero[x] };
scoreDisplay.innerHTML =R(0)+':'+R(1)+R(2)+R(3)+':'+R(4)+R(5)+R(6)+':'+R(7)+R(8)+R(9);
};```

#2:

```var d1=[0,0,0,0] , d2=[1,800,222,123] ,
scoreDisplay = document.getElementById("score");

d2.roundProps="0,1,2,3";
d2.onUpdate=update;
TweenLite.to(d1,10,d2);

function update(){
function R(x){
var X = d1[x]<100?d1[x]<10?'00':'0':'';
return X+d1[x]
};
scoreDisplay.innerHTML = d1[0]+':'+R(1)+':'+R(2)+':'+R(3) ;
};```

pls check this out :

See the Pen LpbvWO by MAW (@MAW) on CodePen

• 6
##### Share on other sites

Amazing, thanks Diaco! I am going to pull this apart to get a better understanding.

Cheers,

Phil

##### Share on other sites

The ScrambleText plugin would be great for this. The only problem is that it randomly chooses the value/char. Maybe Jack could add in an option to use sequential values instead of random ones.

I didn't set it up like a timer. I just wanted to show how it looks weird using random numbers.

See the Pen RWoOzO by osublake (@osublake) on CodePen

• 2
##### Share on other sites

• 3 years later...
On 9/29/2015 at 2:22 AM, Diaco said:

Hi Pusher

if i understood correctly what you're looking for , i think one of these methods can help you :

#1 :

```
var distance = {score:0} , zero = [0,0,0,0,0,0,0,0,0,0] ,
scoreDisplay = document.getElementById("score");

TweenMax.to(distance, 10, {score:"+=1800222123", roundProps:"score", onUpdate:update});

function update(){
var N = distance.score.toString().split('');
if(N.length<zero.length){N.unshift(0)};
function R(x){ return N[x] || zero[x] };
scoreDisplay.innerHTML =R(0)+':'+R(1)+R(2)+R(3)+':'+R(4)+R(5)+R(6)+':'+R(7)+R(8)+R(9);
};```

#2:

```
var d1=[0,0,0,0] , d2=[1,800,222,123] ,
scoreDisplay = document.getElementById("score");

d2.roundProps="0,1,2,3";
d2.onUpdate=update;
TweenLite.to(d1,10,d2);

function update(){
function R(x){
var X = d1[x]<100?d1[x]<10?'00':'0':'';
return X+d1[x]
};
scoreDisplay.innerHTML = d1[0]+':'+R(1)+':'+R(2)+':'+R(3) ;
};```

pls check this out :

See the Pen LpbvWO by MAW (@MAW) on CodePen

looking for something similar after some real brainf**k ... your stuff and ideas are just awesome - every single time!

Thank you so much Diaco!!