Hi, I would like to make a counter that counts up from 95 000 to 96 000 and slows down at the end of the count. Anyone knows how to make that happen? 
Have you looked at any of the counter threads on the forum already
I'm searching the forum right now and hope to find something like the counter I want. Do you have a suggested solution already now? I want the counter to be in clean text and no flipping numbers.
This might be a starting point:
1 Like
Hi Max. Are you able to look into my banner I've created. The counter works fine when I'm working on the banner in Hype but when I export it as a "banner file" the counter doesn't work 
OK_VB_banners.hype.zip (72.8 KB)
You are using countUp and loading as it a "module". That way of loading JS is new and was put under CORS restrictions. Hence, you can't load them through the file:// scheme. So, as long as the banner runs on the http(s) and from the same server it should work.
You can also just use the script I mentioned above as it doesn't require the module interface.
Ok. I'm not very good at javascript and wonder if the file attached is better. I can se that the script type still is module, can I change that and have the script work anyway?
I've tried to embed the script in the header of the hype document.
OK_VB_banners_embeded_script.zip (75.6 KB)
Its a module so it needs to be inserted as a module.
Only thing this doesn't allow previews on file://, that's all.
If you need previews on file:// just don't use countUp or rewrite it to regular JS.
Or use the approach mentioned by me above.
one nice idea would be to sync the counter to any Hypetimelines progress. i'd guess this is what @MaxZieb provided as well
simple setup could be like:
var start = 95000;
var stop = 100000;
var timelineName = 'xxx';
var targetElId = 'target';
////////////////
var anim, progress, curr;
var targetEl = hypeDocument.getElementById(targetElId);
var diff = stop - start;
var dur = hypeDocument.durationForTimelineNamed(timelineName);
targetEl.innerHTML = start;
hypeDocument.startTimelineNamed(timelineName, hypeDocument.kDirectionForward);
function animate() {
if(hypeDocument.isPlayingTimelineNamed(timelineName)){
progress = hypeDocument.currentTimeInTimelineNamed(timelineName) / dur;
curr = Math.ceil(start + diff * progress);
targetEl.innerHTML = curr;
anim = requestAnimationFrame(animate);
}else{
cancelAnimationFrame(anim);
targetEl.innerHTML = stop;
}
}
animate();
sample doc:
xyz.hype.zip (17.1 KB)
1 Like
Thank you for your input, I'll try and see if I can make something out of your suggestion
Hello @h_classen .
Is there a way to adapt the counter to count to 2.63 per minute?
I would like to display the carbon footprint as a user stays on the page (based on an approximation of 2.63 g per minute.) like this:
I have tried to do it myself, but I did not get a functional solution.
Thank you!
in the script change:
var start = 0;
var stop = 2634;
and
curr = Math.ceil(start + diff * progress)/1000;
... and make sure your timelines duration is 60 seconds
AND please consider that the easing applied to the timeline will also be found in the counte 
2 Likes
