Count up Javascript

Using JavaScript with Hype
1

Hi everybody!
I would like to set a countup.js (like this one: Count Up.js) from 0 to 15.5 on my project but I don’t know how to do it!! I have tried everything and I have already read about it in other similar topics but it is still out of my capacity.
I am sure that this is a simple question but I don’t know how to solve this problem without your help!

Thank you!

1 Like
2

@isycali

I have not used count.js before so I will not be a repository of useful advice. Below is the code I used in the attached Hype project that was basically copied off their github site.

countUp.js-master.zip (35.8 KB)

The only addition of mine was to create a text element with an ID (“counter”) as seen in the 1st line. This element value was set in a variable (“nuCounter”) to be used further down the script.

Just after "// here are your main settings" You will see:

• The “nuCounter” variable;
• “0” & “15.5” parameters for your count up from 0 to 15.5;
• The count up duration of 5 seconds.

The “options” are self-explanatory, but read more on the demo page You linked to in your post above for possible variations.

nuCounter = hypeDocument.getElementById('counter');
	var options = {
	  useEasing: false, 
	  useGrouping: true, 
	  separator: ',', 
	  decimal: '.', 
	};

    // here are your main settings
	var demo = new CountUp(nuCounter, 0, 15.5, 1, 5, options);
	
	if (!demo.error) {
	  demo.start();
	} else {
	  console.error(demo.error);
	}

**Post Edit:** I forgot to add something in my description of the parameters above:

var demo = new CountUp(nuCounter, 0, 15.5, 1, 5, options);

The “1” after 15.5" represents the number of decimals to use. In the demo this “1” is what gives the count up the “.5” second aspect. If this parameter was “0” there would be no decimals and the numbers would be whole numbers only.

4 Likes
3

Thank You, Jim, for your ‘how-to’ connect this js snippet to hype’s text element. Now it works!

1 Like
4

Thank you!!! It works perfectly! :smile:

1 Like
5

Hey Jim

I’m trying to get this working but struggle as I’m a js beginner. I woudl appreciate a more step-by-step explanation how to make this code run in a Hype project.

The .zip package you provided includes a lot of code and I’m not sure which one I’m supposed to include in my hype project.

Thanks for your help!

6

It looks like you’re all set here? Simple CountDown (from 100 to 0) with JS

1 Like
7

Yep. Thanks again!