Jump to content
GreenSock

Mr Pablo

Countdown?

Warning: Please note

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

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?

Link to comment
Share on other sites

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" });
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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);
});
  • Like 3
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 1
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.
×