Is an animated countdown with numbers possible?

As mentioned in the title im curious if i can create an animated countdown with numbered text or number icons.

Thanks for your help.

I havenā€™t tried this myself, but this may work for you.

You can store a custom state of type number in an element. Then in your workflow, perform a ā€˜Do every x secondsā€™ to increment the custom stateā€™s value. In your text element, just reference the custom state as dynamic data.

1 Like

Thanks Scott iā€™ll try it out.

Is there any documentation on this? I canā€™t seem to figure it out.

Hi njfrlng the documentation is a bit sparse so they might not have gotten around to it yet if it is possible.

Iā€™ll try to create the solution in the shared app https://bubble.io/page?id=forum_app

Iā€™ll reply again if successful.

awesome! goodluck

Check it out at https://bubble.io/page?type=page&name=scott&id=forum_app&tab=tabs-1
I placed the custom states on the group named ā€œGroup Count Up/Downā€ and make sure to check out the workflows. Let me know if itā€™s not similar to what you are trying to achieve.

Much thanks! figured it out!

Any idea how to incorporate a countdown timer with a date selector?

Iā€™ve added a separate group on your page where Iā€™m trying to figure it out. No luck yet

Can you please explain what the date selector is for? Are you perhaps trying to count down to a date? If yes, what are you trying to count down by: seconds, minutes, hours, days etc?

Did you ever figure this out? I am trying to do the same thing.

Any info on a countdown would be appreciated

Iā€™m not sure if what Iā€™ve done helps, but here goesā€¦

When a user hits a button to start a timer, Iā€™m creating a record. One of those fields is ā€˜seconds remainingā€™. On creation I set this to:

(current date/time + 1500 seconds) - current date time : formatted as seconds

That is, it gets the value 1500 (which in seconds = 25 mins).

On creation of the record, Iā€™m also setting a state to be Timer Started = Yes.

Thereā€™s then a workflow action that says:

Every 5 seconds (when Timer Started = Yes), update the record and set ā€˜seconds remainingā€™ = ā€˜seconds remainingā€™ minus 5

Thereā€™s also a Text element which simply displays Seconds Remaining.

Itā€™s not perfect (it only updates every 5 seconds and the time remaining is displayed in seconds rather than mins:secs), but it works.

2 Likes

To correct some really stupid things I said aboveā€¦

  • As the Seconds Remaining field is a number, it is possible to simply enter the number of seconds on creation (rather than calculate from time)
  • On the ā€˜do every 5 secondsā€™ action, you can set the number of seconds (e.g. to 1)

Thereā€™s probably other stupid stuff I said which will make the process more efficient?!

1 Like

lol! I was really hoping that I could show the time remaining in days:hours:minutes:seconds formatā€¦but maybe this is asking too much!

I have a fudge (and Iā€™m only working with mins)ā€¦

If my DB field is a Number (seconds remaining) e.g. 1200 (for 20 mins), then my text label says:

Seconds Remaining - 60 / 60 formatted as 1234 (zero decimal places) min Seconds Remaining <- modulo -> 60 secs

The first formula gives the minutes (itā€™s necessary to minus 60 seconds otherwise it starts at 20 mins 59 secs). The second formula (modulo) gives the ā€˜remainderā€™ of something (i.e. seconds left after dividing the total by 60ā€¦ keeping it as number of seconds, rather than a decimal remainder of minutes when dividing by 60).

Itā€™s imperfect, but works well enough for me. Iā€™m sure you could extrapolate it out for hours, days, etc.

Of course, if there was a Formatted As TIME (hh:mm:ss) function, that would make life easier.

1 Like

More stupidity from me to correctā€¦ The -60 secs in the first part of the formula will do some funky rubbish when you get down to zero mins. So, the reality is that I havenā€™t yet worked out a clean way to achieve this.

1 Like

NB: The below solution causes one workflow API call per second, and is therefore not practical.

Iā€™ve got a solution that works for me that Iā€™d like to share.

Iā€™ve got a quiz popup where I want a timer of 30 seconds counting down to be displayed. I have a user data (date) field called ā€œEnd timeā€. When the quiz popup is shown, I also change the ā€œEnd timeā€ field for Current User to Current date/time + 30 seconds. In the popup is a Timer Group with data type Number and a text box containing Parent Groupā€™s Number.

I created a workflow that executes every 1 second ā€œWhen quiz popup is visible AND Current Userā€™s End time - Current date/time : formatted as seconds >= 0ā€. The last bit is important to make sure the timer stops at zero. This workflow element does ā€œ(Display Data in Timer Group) Current Userā€™s End Time - Current Date/Time : formatted as seconds.ā€

This is only a solution for a seconds countdown, but you could display hours or days and add whatever text or formatting you like. Iā€™m not sure if this causes 30 workflow calls, which would make it an impractical solution, Iā€™d welcome any comments on that issue.

1 Like

Hey Richard, could you show me an example of how to do? I want to make a simple countdown timer but I am struggling to build one using workflows.

Iā€™d be happy to, but Emmanuel just confirmed that my solution generated one Workflow API Call for each second it runs, so this is impractical. Iā€™m researching a better solution (using the fact that Bubble displays live data) and Iā€™ll let you know.

2 Likes

Thanks