Creating a Captivating Typing Effect in Storyline 360 with JavaScript Magic

In this post, I’ll show you how to create a typing animation effect in Storyline 360 using a Storyline text variable and JavaScript. Let’s start by looking at how you might use this effect, then I will show you how to create the Storyline variables and JavaScript code.

What are some uses for the animated typing effect?

• Emphasize critical information: You can use the typing effect to gradually reveal information, such as key points, definitions, or quotes. This helps the learner focus on one piece of content at a time.
• Simulate a real-life scenario: You can simulate writing an email, coding, or messaging. This can create a sense of familiarity and make the content more relatable for your learners.
• Storytelling and narration: Using the typing effect in a story situation can simulate character dialogue. As the text unfolds, the learner can feel more immersed in the narrative and strengthen their connection to the content.

Now that you have some ideas of where you might use this effect, let’s take a look at how to create the Storyline variable you’ll use to create the typing animation effect.

Step 1: Create the Storyline 360 Text Variable

Create a Text variable in Storyline 360 and include the text you want to animate in the default value. When finished, insert a reference to this variable onto your slide.

Name: OfficeKayIntro

Type: Text

Default Value: Hello, I’m Officer Kay. I have been called to the Secret Garden Inn to investigate a stolen wallet. I need your help identifying the culprit. Let’s start our investigation by talking with Mr. James Thompson, the Manager of the Secret Garden Inn.

Create Text Variable in Storyline 360

Insert the Text Variable onto Your Slide

How are you doing so far? If you are not sure how to add the text variable to your slide, check out this article from Articulate: Storyline 360: Adding Variable References.

If you have your Storyline 360 text variable in place, it’s time to use JavaScript to animate it. The code shown below should do the trick!

Step 2: Create a Trigger to Execute the JavaScript Code

Create a trigger that executes the following JavaScript code when the timeline starts on the slide.

// get the Storyline player object
var player = GetPlayer();

// get the value of the "OfficerKayIntro" variable from Storyline
var message = player.GetVar("OfficerKayIntro");

// set the typing speed in milliseconds and initial index
var typingSpeed = 50;
var i = 0;

// clear the initial value of the "TypingText" variable in Storyline
player.SetVar("OfficerKayIntro", "");

// create the typing effect
function typeWriter() {
  if (i < message.length) {
    var currentText = player.GetVar("OfficerKayIntro");
    currentText += message.charAt(i);
    player.SetVar("OfficerKayIntro", currentText);
    i++;
    setTimeout(typeWriter, typingSpeed);
  }
}

// call the typing effect function
typeWriter();

Final Result

Once you have the Storyline variable and JavaScript trigger set up, you should see the following. Remember, you can control the speed by modifying the section of code below. Don’t forget, when using JavaScript, you will need to publish to see the results.

// set the typing speed in milliseconds and initial index var typingSpeed = 50; var i = 0; 

I hope you found this useful. If so, take a moment and comment below. In the meantime, I’ll keep learning more about how to use JavaScript with Storyline and post what I discover.