Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Pusher

Counter

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

Link to comment
Share on other sites

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

 
  • Like 6
Link to comment
Share on other sites

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

 

Cheers,

 

Phil

Link to comment
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

  • Like 2
Link to comment
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!!

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.
×