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!

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 Javascriptvar player = GetPlayer(); //Get the value variable of "yourVar" from Story file var toCount = player.GetVar("yourVar") // Update the countvar 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 debuggingconsole.log(toCount) }, //Interval iteration duration in milliseconds e.g. 1000 = 1 second 50);

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.

Hi, Walt! I see that Matthew has offered a suggestion here to assist! Please feel free to let us know if that is what you have in mind, or if you need additional design-related advice, you are welcome to reach out in our Building Better Courses forum here, as well.

YES, That is exactly what I want but I have no idea where to start with that? What are the steps I need to include this code in my module and in the file structure of the published module? THANK YOU!!!!

Awesome. Thanks so much Matthew! I really appreciate your help.

Creating an animated count up number, javascript???

21 Replies

ChristiePollick
Community Member
10 years ago
Hi, Walt! I see that Matthew has offered a suggestion here to assist! Please feel free to let us know if that is what you have in mind, or if you need additional design-related advice, you are welcome to reach out in our Building Better Courses forum here, as well.
WaltGill
Community Member
10 years ago
YES, That is exactly what I want but I have no idea where to start with that?

What are the steps I need to include this code in my module and in the file structure of the published module?

THANK YOU!!!!
WaltGill
Community Member
10 years ago
Awesome. Thanks so much Matthew! I really appreciate your help.
WaltGill
Community Member
10 years ago
AMAZING!!! That is it! Wish I had your talent.

Thank you so much! I really appreciate your help!!!
WaltGill
Community Member
10 years ago
Just one last question Matthew,

Do I place this html file in the story_content/external_files/ directory and point the web object to that location?

Thank you!!!
WaltGill
Community Member
10 years ago
WOW. I had no clue. So when I want to publish this to an LMS, it will work as well?
WaltGill
Community Member
10 years ago
That is awesome! Thanks so much! This will help tremendously when publishing to our LMS.

HAVE A FANTASTIC WEEKEND!!
Crystal-Horn
Staff
10 years ago
Wow guys. Awesome collaboration! Thanks Matthew for the effort on this one! :)
- BrianAllen
  Community Member
  10 years ago
  I agree with Crystal, this is really good, best thing I've read this morning. Thanks for sharing here in the community!
MalissaThomas
Community Member
9 years ago
This is so great! How can I recreate this? I need a counter up to 2,000,000 ...
MalissaThomas
Community Member
9 years ago
This is great!! Thank you!