Jump to content
GreenSock

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

Speeding Countdown

Recommended Posts

Does anyone know how to create a countdown that easeIn (speeds up) as it gets closer to 0 and confine the duration to a 10 second window?

 

Format:

06 HR : 00 MM : 00 SS

 

Please advise. Thanks to anyone who can shed some light on it. 

Share this post


Link to post
Share on other sites

Hey LK1037,

 

The main thing you need is the logic to count down using a time format. Maybe this thread may help you come up with that:

Once you have that in a timeline, it's easy to add easing to it and adjust the total time that it takes. You can just use a tween with the timeline as a target and apply an ease to it.

 

Feel free to post back here if you get stuck on something.

Share this post


Link to post
Share on other sites

Sorry, Zach, way out of the wheelhouse on that one.

 

Attached is an image that basically shows where we're hoping to end up.

Here's where we're at so far... 

See the Pen GRRJLqM by acole76 (@acole76) on CodePen

 

 

SpeedingCountdown.png

Share this post


Link to post
Share on other sites
22 minutes ago, LK1037 said:

Here's where we're at so far...

Cool, but you don't want your animation duration to be based on how many times you run a function. Instead the process should look something like this:

  1. Create a function that takes a value between 0 and 1 and outputs a time format corresponding with that percentage. It'd be easiest to create using linear easing (e.g. an input of 0.5 would output 03 00 00).
  2. Create a timeline (var tl = new TimelineMax() for example). Make sure it's paused.
  3. In the timeline's onUpdate function, send the progress to the function that you created in 1.
  4. Create a tween that animates the timeline you've created in steps 2-3 with whatever duration and ease that you'd like.

Does that seem doable?

Share this post


Link to post
Share on other sites

I recognize what you're saying, however, executing that is a whole different beast.

Can you dummy that down to newbie-speak?

Share this post


Link to post
Share on other sites
Just now, LK1037 said:

Can you dummy that down to newbie-speak?

Which parts are you having trouble with?

Share this post


Link to post
Share on other sites

LOL, I'm good until right after the words "Create a function that ..."

Share this post


Link to post
Share on other sites

I think it'd be easiest to describe in code (with comments). Please let me know if you have questions.

 

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

 

Though my above approach would also work, I realized you don't actually need a timeline. One regular tween will do just fine. So the actual steps were:

  1. Create a function that takes a value between 0 and 1 and outputs a time format corresponding with that percentage. It'd be easiest to create using linear easing (e.g. an input of 0.5 would output 03 00 00).
  2. Create a tween that animates from your start time to 0 with whatever duration and ease that you'd like.

Share this post


Link to post
Share on other sites

Ok, I posted a generic version to CodePen.

See the Pen PooqvEr by sgbluq (@sgbluq) on CodePen

When I drop in the function, it removes the target placeholder—it shows for a split second, then is overtaken by the counter.

 

See what I mean?

Share this post


Link to post
Share on other sites
7 minutes ago, LK1037 said:

When I drop in the function, it removes the target placeholder—it shows for a split second, then is overtaken by the counter.

 

See what I mean?

Uh... yes. Did you read my code? You need to change where the counter is updated to whatever elements you want to use. I would suggest taking a free course on JavaScript online somewhere.

 

You also are not loading TweenMax properly. CodePen is meant to have all the things inside of your <body> in the HTML section. You can load additional JS resources by clicking the cog in the JS panel.

Share this post


Link to post
Share on other sites

Zach,

 

Thanks for your help and all the notations. After going back through it, we figured out what you meant. All good. Worked perfectly.

  • Like 1

Share this post


Link to post
Share on other sites

Zach — after running through testing, we found that the countdown playback is inconsistent. Seems to be a Chrome issue. 

 

On initial load, the countdown is stuck at the beginning. Refresh triggers it to play all the way through as intended. Refresh causes it to get stuck. Seems to work every other time.

 

Does this have to do w/ the "pause" you mentioned? How do we fix it?

Share this post


Link to post
Share on other sites

You'll have to make a demo of your issue. It's impossible for us to help blind. Please create a CodePen or something that recreates the inconsistency that you're referencing. The below thread can help you so do:

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×