Reveal countdown every time div is shown

[rkmorley]

I have two functions for mouse click and keyboard button press to reveal the countdown. The countdown only works once if you fill in the input and press enter or mouse click. After that, it just stops animating the countdown.

 

Is there any way to know how to do the countdown every time the div has been shown?

See the Pen qzgpqV by anon (@anon) on CodePen

[ZachSaucier]

Hello and welcome to the forums!

 

There are a few things that I'd change about your approach if I were doing it. The first thing that sticks out is your repeating of the long list of .from() animations on keyup and keypress. I'd make a function that I then call it from those event listeners.

 

The second thing is that it seems like you just want the animations to play when the form is submitted. The way you're attempting to do that is through listening to the button click and the keys in the form. Why not just listen to one event - the form submission - instead? Vanilla JS and jQuery have methods to listen for that. In your demo I had to move the submit button within the form to get the click to submit it without extra JS.

 

Thirdly it seems that you aren't changing anything about the long list of .from() animations when you call it, so I'd create the full animation timeline before you call it at all. That way you don't have to rebuild it every time and worry about it overlapping each other.

 

In order to get the countdown (countup?) to work using .to() you need to reset the variable to its initial state. You could do that by simply declaring the following inside of your animation function:

 

Cont = { val: 0000000000 };

Otherwise you could use GSAP's fromTo method instead of the .to() like so:

 

TweenLite.fromTo(Cont, 5, 
{
  val: 0
},
                 {
  val: NewVal,
  roundProps: "val",
  onUpdate: function() {
    document.getElementById("counter").innerHTML = Cont.val
  },
  autoAlpha: 0,
  delay: 0.1
});

 

Altogether that would look something like this:

 

See the Pen jjdXOg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

[OSUblake]

I have to ask about this.

 

Cont = { val: 0000000000 };

 

Are you expecting the output to contain all those 0s, kind of like this?

 

0000000000
0000000001
0000000002
0000000003
...
1710007692

 

 

If so, that won't work for several reasons. First, 0000000000 will evaluate to 0, so 0 will be the starting number. Second, numbers that start with 0s might be parsed as an octal, so a number like 0000000021 will become 17.  See this article for more information.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates

 

To get it to output in a format prefixed with 0s, you will need to convert it to a string and pad it. You can do this with a string's padStart method. There's also a polyfill for older browsers.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

 

But first, I would first store your counter element in a variable so you don't keep searching for it.

 

var counter = document.getElementById("counter");

 

 

And then change the onUpdate callback to this.

 

TweenLite.fromTo(Cont, 500, 
  {
    val: 0
  },
  {
    val: NewVal,
    roundProps: "val",
    onUpdate: function() {
      counter.innerHTML = (Cont.val + "").padStart(10, "0")
    },
    autoAlpha: 0,
    delay: 0.1
  });

 

 

[rkmorley]

Thank you guys, I definitely learn a lot about jQuery and Greensock!