Hey everyone! I need to create a countdown timer with a flip effect. Is it possible to add one of these or similar https://1stwebdesigner.com/9-free-open-source-flipping-clocks-using-css-javascript/ to Hype in a “simple way”? Example: https://pqina.nl/flip/#nutshell Example: https://codepen.io/sh…

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 …

http://flipclockjs.com/ just go thru the basic example on the startpage … nothing special to hype here

That did not help me at all :slight_smile: I edited my post to explain better.

Yes, you needs to animate each number or use symbols. For a ticker you can use a timelines and custom behavior. I am on the road but I’ll post something later. Probably not full animated but the dynamic using only Hype.

old post [image] Airport Style Letter Clacks Template Gallery Airport Style Clack Letters - which give you control over the letters displayed and speed. Controlled only from Timeline Actions - ( Putting the symbol action (start timeline) on the slide timeline and having …

Thank you but that doesn’t work. Should be more clear. It should countdown to Christmas.

You would place the code within an HTML widget to use it. Something like this: https://codepen.io/themorgantown/pen/LYYabYq

You are a god damn genious Daniel. Thank you so much!!!

Now I have this sinking feeling that I need to think of :gift:s…

:sweat_smile: If you can explain how I can style it I with different background color, font e.t.c. I will send you a present all the way from Sweden!

It’s all regular ole CSS, so you can apply a CSS style to that entire document, or the digits, which would be: .flip-clock-wrapper (No present needed :slight_smile:

Countdown timer

Using JavaScript with Hype

MarkHunte (Mark Hunte) November 20, 2019, 5:41pm 5

old post