Countdown?

[Mr Pablo 6 Likes (Newbie)]

I've seen a few posts about doing countdowns in AS, but is there a way to do a countdown e.g. From an integer or even a date, using the GSAP JS library?

[jamiejefferson 1,200 Likes (Superhero)]

Yes, you can tween an integer. If you need a date just tween timestamps (also integers).

var foo = { bar: 100 };
TweenLite.to(foo, 2, { bar: 0, roundProps: "bar" });

[Mr Pablo 6 Likes (Newbie)]

Hmm, if i had a date in the future, say a few months away, how could I show a countdown from today's date, to that future date, counting down the seconds?

 

EDIT - I'm just trying to figure this out, and I have your code snippet, but how would I display this? I am trying:

var foo = { bar: 100 };
            
$('#container').append('<p>'+foo.bar+'</p>');
            
TweenLite.to(foo, 2, { bar: 0, roundProps: "bar" });

But nothing animates..

[jamiejefferson 1,200 Likes (Superhero)]

Yes that wouldn't animate since you are just taking the current value of foo.bar and making a string out of it. Use an onUpdate to actually apply the changes

TweenLite.to(foo, 2, { bar: 0, roundProps: "bar", onUpdate: function() {
  $('#container').text(this.target.bar);
});

[Mr Pablo 6 Likes (Newbie)]

Thank you (I literally figured it out at the same time as you posting it haha!)

 

EDIT - hmm, so now that is working, tweening from one timestamp to another (number of seconds) how would I make the tween update once a second?

[Carl 11,326 Likes (Superhero)]

You can't control the rate at which a tween updates other than changing the global frame rate of the engine via TweenLite's ticker's fps() method

TweenLite.fps(1) // update all tweens once every second.

If you have any other TweenLite animations on your page this would be highly unadvisable;)

 

If you want to avoid writing the same value to the DOM many times per second you could add some conditional logic to your onUpdate() that only changes the text if foo.bar changes

var foo = {bar:100};var currentBar = foo.bar;


TweenLite.to(foo, foo.bar, { bar: 0, roundProps: "bar", ease:Linear.easeNone, onUpdate: function() {
  console.log("update") //fires 60 times per second
  if(currentBar != this.target.bar) {
    $('#container').text(this.target.bar);
    console.log("change text " + this.target.bar) // fires once per second. 
    currentBar = this.target.bar
  }
}});

Here is a CodePen demo.  http://codepen.io/GreenSock/pen/qKBsC?editors=001

Open the console and you will see that although the onUpdate gets called 60 times per second, the value only gets written once per second in the DOM.

 

Also remember 2 important factors if you want to drive a countdown timer with a tween:

 

1: you must use a linear ease or else it will get very slow at the end;)

2: the duration of the tween needs to be the same as the amount of change