Creating an animated count up number, javascript???

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.

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

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?

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:

I hope this helps!

Also, for dramatic effect is there anyway to show the numbers adding up versus the new added number just appearing? In other words, from the first to the second number, the end user would see 10, 11, 12 (very quickly, within 1-2 seconds).

Here's a simplified version.

Hi Kimberlee,

I'm glad that Walt was able to pop in and help you further here.

Your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.