Count and start timer

Using JavaScript with Hype
1

Hello!

I need to show the title of the numbers textfield as well as the numbers themselves in the same spot (since there’ll be no other space for it in the final design).

Already figured out how to start counting up and down, what’s the problem now:

I trigger a timeline when clicking up or down, which fades the title out and fades the numbers is. The problem is that this happens all the time when the user clicks “up” or “down”.
The way it should be is fading the title out when clicking “up” or “down” for the first time and by clicking again and again just counting the numbers up/down. And within a timer (maybe 2 sec) of no action, it should fade out the number out and the title in again.

Hope this was somehow comprehensible… Probably best to have a quick look at the file:
YourNumberUpDown.zip (118.0 KB)

Thanks a lot in advance for this great help within this forum!

2

Just remove the first fade out from the start of the timeline and only have one fade at the 2 second mark.
You do not need the first…

3

Mark, really, thank you so much for your quick and helpful replies!

I tried what you said (at least what I understood) - works fine. Beside one fact:
The change of “Your Number is:” and the actual number is too hard without any fade in/out. The fade out in the end is just fine (I might adjust this for the final project, but theoretically this is working) - but how to fade in the beginning without repeating it every time the user clicks up/down?

Here’s the update of the file:
YourNumber_Up_Down_v2.zip (115.6 KB)

4

Have a look at this.

A couple of things.

First it uses a single function for up/down

In the head there is a new var firstRun.

The up down function has a test to see if the first run is true if not it will set the opacity of the number to 0 instantly and then fade it in.

It will then set the firstRun to true. Any immediate click will have no fade.

If the timeline is allowed to get to 2 seconds the title will fade back in and a new function is called to reset the firstRun to false.

YourNumber_Up_Down_MHv1.hype.zip (17.1 KB)

5

curious to know what one of those is? :stuck_out_tongue:

1 Like
6

Oh, nice, looks already a lot better!
But what about a crossfade like in the ending? Is this possible too?

I thought it might be easy to add a line more in the volumeUpDown-function - but doesn’t seem to work…
But to be honest, I still don’t understand why “Your number is” is invisible when clicking one of the buttons anyway… ?
In the timeline which gets started on clicking on of the buttons “Your number is” is visible. But in the browser it isn’t. Huh?

7

I do not understand where you want this. What ending.

My reply was going to be Huh?

But I recreated the project from scratch. This lead me to do what whoever made the timeline did.

The text opacity is 100%.
The fade opacity is created first by fading the text out. to 0%.

Then the keyframes are dragged into reverse positions. So now the animation is to fade in.

But it looks like a bug is triggered when then move the animation down stream in the seconds to as we have it 2seconds mark.

The text takes on the value of the first keyframe instantly.