Creating an animated count up number, javascript???

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!

23 Replies
Matthew Bibby

No worries Walt. Here's a demo.

This was done via a web object using the attached index.html

There is no need for changes to the published module, to set it up all you need to do is:

  • Download the attached index.html file
  • Add it to a folder
  • Insert a web object in Storyline and point it to the folder you just created

If you want to change the size and colour of the font, you'll need to do that in the html file.

Hope that helps!

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);