Countdown timer

Using JavaScript with Hype
21

I solved it. Changed the script a bit. It now looks like this.

48
Screenshot 2019-11-22 at 19.40.48.png988×335 44 KB

Again thank you all! I’ll show you the final banner when I’m done it so you know what you helped me with :slight_smile: Have a great evening!

22

If anyone wants to use this countdown timer, here is the hype file.

The css is implemented in the HTML Widget. You can add the css file directly to the resource library as well but I found it much faster to style it directly in hype.

flipclock.zip (84.9 KB)

3 Likes
23

Just to show the potential of a full Hype version of this and the above mechanical letter symbol, I put together this version (based on the longstanding flexible counter by @jonathan)

3 Likes
24

In Safari the gap between the top and bottom collapse when it “flips”. Firefox has the same problem as well as the alignment of the numbers. Is there anyway to fix this?

56

25

This has nothing todo with script or symbols. It seams related to the font “Helvetica”. As we are using a “System-Font” Firefox seams to substitute it with another font. I editited the source to use “Helevetica Neue”. If you want to be very sure it works use an embeded font

3 Likes
26

Thank you Max :slight_smile:

27

Hey again Max!

How can I change the boxes from 8 to 4. One box for days, one for hours and so on. This i what I want to achieve. Thank you!!

counter

28
  1. Edit the boxes in the symbol so two numbers can fit
  2. Then adjust the script… it doesn’t need to split anymore, so we get rid of the loop.
  3. Then we rename the classes without indices

MechanicalLetterCountdownTimerInPairs.hype.zip (65,4 KB)

I am not such a fan of this as the original mechanical letters couldn’t really work like that without having a massive spindle. The clever idea was them being individual numbers from 0-9.

2 Likes
29

Again Max. Thank you so much for your help, the work file and also your super quick reply!!

1 Like
30

Hey Max!

I am making a new campain and will be using the countdown timer again. The problem is that the date is set to September so days will be in 3 numbers. How do I manage to make this visible? I am attaching a work file if you have the time to help out :slight_smile:

It now shows 20 days when it’s suppose to be 204
countdown_test.hype.zip (23.4 KB)

I will also be using animations in this banner and everything will loop. How can I make the timer keep going and disregard that the scene will start from the beginning?

31

Could someone help out with this? Would be highly appreciated :slight_smile:

32

The absolute easiest way to do this would be to simply decrease the text size. By double-clicking to enter the letterDisplay symbol element, you can expand all the groups and select the “Text” elements. Then in the Typography Inspector set the font size to 80px or so.

Otherwise you can expand the width of the contents of the letterDisplay element in a similar manner. Basically make everything within the symbol wider. When done, exit the symbol and make all the elements themselves wider/repositioned to fit the new width.

If you only want the days one to be wider, you would need to use the ‘Symbol > Duplicate Symbol’ menu to have a different backing than the other displays. You’d need to delete the original days symbol element and then you can enter in the duplicate and adjust the sizes as mentioned above.

1 Like
33

Thank you Jonathan!

Yes, that was definitely the easiest way. Feel kinda stupid now :sweat_smile:

34

Glad that worked for you - don’t feel bad as it took a bit of digging and confirming that would be a potential solution :slight_smile:.

1 Like
35

beautiful!