So there are many examples here of fancy count down timers which include date and time etc.
However, I need a simple count down meter which will count down from 100 to whatever number I indicate. Just like the countUp.js but counting down. Also, it would be nice to be able to control the speed of the count down.
Thanks for your help!
Greg
Hi Hans
Yes I found this in a previous post but there is so much code there I don’t know where to start.
A more step-by-step explanation would be helpful.
Greg
create a hypefunction and paste this code:
//fill in below as you need
let startCount = 100;
const stopCount = 0,
duration = 5000,//milliseconds
countDownElement = hypeDocument.getElementById('exampleElement'),//your element to display the countDown
//end fill in ...
intervalTime = duration/Math.abs(startCount - stopCount);
let countDown = setInterval(
function(){
if(startCount === stopCount)clearInterval(countDown)
countDownElement.innerHTML = startCount;
if(startCount > stopCount) {
startCount--
}else{
startCount++
}
},
intervalTime
);
attach the behaviour to run the function to whatever action you want.
not many options, but should work 
countDownOrUp.hype.zip (13.0 KB)
Thank you Hans! Exactly what I wanted!
Greg
Posting since I was writing it any way.
The simplest up/down counter I can think of.
Is have your timeline fire the Javascript at the end of any animations for the counter.
Put the time line in a loop with a start timeline action at the end.
This should in most cases allow you to adjust the speed of the animation in sync to the javascript changing the counter number.
The script that is run by the counter timeline is this.
The script is first run by the On Prepare For Display
Only the first bit is run because we use an if condition to check whom called the script.
The rest of the script is commented.
var countNumber_ = hypeDocument.getElementById('countNumber')
let startNumber = 0
let endNumber = 10
let directionISGoingUp = true // true = count up, false = count down.
//-- set the number in the scene
if (event.type == "HypeScenePrepareForDisplay"){
// ------------------ Only run on HypeScene Prepare For Display ------------------///
countNumber_.innerHTML = startNumber
return
}
var countNumberInner = parseInt(countNumber_.innerHTML, 10); /// Parse string into number
//--- COUNT UP
if ( countNumberInner != ( endNumber - 1) && directionISGoingUp ){ //check if we have fully counted up
//--if not change the nmuber
countNumber_.innerHTML = (countNumberInner + 1)
return
}
//--- COUNT DOWN
if ( countNumberInner != ( endNumber + 1) && !directionISGoingUp ){ //check if we have fully counted down
//--if not change the nmuber
countNumber_.innerHTML = (countNumberInner - 1)
return
}
//--- stop the counter
hypeDocument.goToTimeInTimelineNamed(0, 'counter')
hypeDocument.pauseTimelineNamed('counter')
//set the final number
countNumber_.innerHTML = endNumber
simple countdownUP.hype.zip (23.6 KB)
WOW! This is great! Thanks for sharing Mark. It uses vector shapes which is what I want to learn since I upgraded to the newest release lately.
Cool,
Just changed the code a little so we automatically get if the count is up or down.
We simply calculate if start time is less than end time.
var countNumber_ = hypeDocument.getElementById('countNumber')
let startNumber = 10
let endNumber = 0
// check if start time is less or more than end time to determine if count should go up or down,
if ( startNumber < endNumber ) { hypeDocument.customData.direction = true } else { hypeDocument.customData.direction = false } // true = count up, false = count down.
let directionISGoingUp = hypeDocument.customData.direction
//-- set the number in the scene
if (event.type == "HypeScenePrepareForDisplay"){
// ------------------ Only run on HypeScene Prepare For Display ------------------///
countNumber_.innerHTML = startNumber
return
}
var countNumberInner = parseInt(countNumber_.innerHTML, 10); /// Parse string into number
//--- COUNT UP
if ( countNumberInner != ( endNumber - 1) && directionISGoingUp ){ //check if we have fully counted up
//--if not change the nmuber
countNumber_.innerHTML = (countNumberInner + 1)
return
}
//--- COUNT DOWN
if ( countNumberInner != ( endNumber + 1) && !directionISGoingUp ){ //check if we have fully counted down
//--if not change the nmuber
countNumber_.innerHTML = (countNumberInner - 1)
return
}
//--- stop the counter
hypeDocument.goToTimeInTimelineNamed(0, 'counter')
hypeDocument.pauseTimelineNamed('counter')
//set the final number
countNumber_.innerHTML = endNumber
simple countdownUP_v2.hypetemplate.zip (15.7 KB)
Fancy version.
Two vector timelines, the new one reverses the animation to match the count direction.
The button runs the same counter() function but only its part. Doing this gives us a simple reset and also guard on multiple clicks.
if(element.id == "startButton"){
// ------------------ Only run on button click ------------------///
if (countNumber_.innerHTML == endNumber){
countNumber_.innerHTML = startNumber
}
hypeDocument.startTimelineNamed(hypeDocument.customData.timeLine)
return
}
we can also change the vector colour depending on up or down. Run in the “Prepare For Display” section of the code.
if (event.type == "HypeScenePrepareForDisplay"){
// ------------------ Only run on HypeScene Prepare For Display ------------------///
countNumber_.innerHTML =startNumber
hypeDocument.customData.timeLine = (directionISGoingUp ? "counterUp" : "counterDown");
//-- Change the vectors color depending on up or down
if (directionISGoingUp){
hypeDocument.getElementById("countVector").querySelector("path").style.stroke = upColor
} else{
hypeDocument.getElementById("countVector").querySelector("path").style.stroke = downColor
}
return
}
Legend! Thanks 
Hi Hans
I have one more question. Would it be possible to tweak the code so that the startCount and StopCount values are taken from the form or some other form? In other words, we could type the start and end values ourselves in some kind of a form.
Thanks for your help.
Greg
what formelement do you mean/prefer?
you may serve a example-hypefile which includes the formelements you'd prefer 
Hi Hans
See the attached example. However, if you have any other ideas on how to do this feel free to change it. Basically, I would like the user to decide what value the counter starts and ends at by typing numbers into the forms.
However, this approach presents another problem with the speed. Currently your code sets the speed to 5000ms to count from 100 to 0. That’s good speed. However, would it be also possible to tweak the code so that the speed is calculated based on the inputs from the forms (in 50ms increments)? For example it takes 5000ms to count down from 100-0, 4950ms to count down from 100-1, 4900 to count from 100-2 etc. and 50ms to count from 100-99.
Looking forward to your reply.
Simple CountDown:Up timer.hype.zip (82.0 KB)
This is perfect! Thank you Hans!
Hi Hans
I have one last question. I’m trying to write an if/else statement based on the number value a user inputs into the “stopCountdownInput” which stops the counter at that value so the statement looks like that:
if ( the number is 10 ) {
// run this timeline
} else if ( the number is 20 ) {
// run this timeline
} else {
// run this timeline
}
but I don’t know how to write the condition which will check the number in the “stopCountdownInput” box. I tried the following:
hypeDocument.getElementById(‘stopCountdownInput’).value === 10
hypeDocument.getElementById(‘stopCountdownInput’).input === 10
hypeDocument.getElementById(‘stopCountdownInput’).innerHTML === 10
but nothing works.
Thanks for your help!
hypeDocument.getElementById(‘stopCountdownInput’).value
will be a string, not a number
if you want to convert it to a number run parseInt(yourValue)
within my script i used valueAsNumber which should always return a number
the input field is of type number anyway
please also consider at which time you want to run a timeline:
-> input is finished <- this would involve a further event handling
-> when countdown has started
-> when the countdown has finished
???
if you’ve questions of how to run if-else-statements then https://www.w3schools.com/jsref/jsref_if.asp is a good starting point
I think this is a little too difficult for me. I wrote the following if/else statement but it’s not working.
if (hypeDocument.getElementById('stopCountdownInput').valueAsNumber === 10) {
hypeDocument.goToTimeInTimelineNamed(0, 'stop10')
hypeDocument.continueTimelineNamed('stop10', hypeDocument.kDirectionForward, false);
} else if (hypeDocument.getElementById('stopCountdownInput').valueAsNumber === 50) {
hypeDocument.goToTimeInTimelineNamed(0, 'stop50')
hypeDocument.continueTimelineNamed('stop50', hypeDocument.kDirectionForward, false);
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
}
Something is probably missing.
Also your are using strict comparisons. Read up on the difference between === and ==
quotes have to be straight
Edit:
@Daniel corrected the quotes in your post.
so there is just one curly bracket at the end that is not needed .... then it should be correct.
problem that remains:
Got it! Thanks a lot for that!