Creating an animated count up number, javascript???

Jul 21, 2016

Hi everyone,

I have been racking my brain trying to figure this out and I don't know how to do this.

How can I create an animated number that counts up from 1 to 5000 in a relatively short amount of time, 3 seconds?  

It would be similar to an infographic where you can see the number getting larger and then stop with some information tagged to it.

Thanks so much for any suggestions!

21 Replies
Jesse Sutton

A workaround I found was to create the animation using After Effects (this YouTube video explains how to do this).

Because Storyline can't import transparent video files, I made the background of the video the same background of Storyline slide.

I then just inserted the video into my e-Learning project. I can place other objects on top of the video, just as if it's another object.

 

Damien Duddy

I created something a bit more simplistic but less stable with the setInterval method in Javascript.

The following script will add 2500 to a variable every 50 milliseconds until it reaches the target value of 25,000. So in this case it will count to 25,000 in around 0.5 seconds I used this in a cue point trigger:

//Build a bridge to player in Javascript
var player = GetPlayer();

//Get the value variable of "yourVar" from Story file

var toCount = player.GetVar("yourVar")

// Update the count
var x = setInterval(function() {

//The number to count up to (in this case 25000)

if (toCount < 25000) {

//How  much to increment per interval iteration
toCount= toCount + 2500;

/*The below segment will format the number and set it to a localized string, in this case British English. I used this particular variant for converting to monetary amount with a comma

This may not be necessary for your purposes depending on what you want to use it for.*/


var countString = toCount.toLocaleString('en-GB')

/* This sets 2 variables, one as an integer and one as a string. If the variable is required again throughout the course, it is essential to have the integer set to the correct number and not the formatted string, as Javascript will not perform correct mathmatical operations on a string.*/

 

player.SetVar("yourVar",toCount);
player.SetVar("yourVariable",countString);
}

//this line isn't necessary but I always use it for basic debugging
console.log(toCount)

},

//Interval iteration duration in milliseconds e.g. 1000 = 1 second

50);

 

Kimberlee Boyd

Is there any way to do this directly in Storyline 360 without embedding AfterEffects or using javascript? I'm thinking maybe something using a timeline. In the first module of my course, I want to create shock value for the learner. I will animate in 4-5 statements each that have a number associated with it. When each statement is added I want the number counter to quickly be added to the previous one, which means the number is increasing with each statement.

For example: Time to study for your boards (18 hrs); Time to complete the NCLEX exam (4 hrs)

I want to display onscreen the number counting up from 18 to 22. 

It will be more dramatic than this but I want to keep it basic for the sake of this post.

Can anyone help?

Maria Costa-Stienstra

Hi, Kimberlee.

Thank you for reaching out!

You can create what you're envisioning using variables and triggers. Every time a statement shows up on the screen, you can adjust the variable (add value 18 to the variable counter, then add value 4 to the variable counter, etc.).

In the example below, I used one textbox that animates by paragraph, but you can do it with separate objects as well:

Screen Recording 2022-01-27 at 10.33.07 AM

I hope this helps!