Custom eLearning: Typing Effect Animation in Articulate Storyline 360

Articulate Storyline 360 is one of the most powerful tool to create interactive, engaging and mobile friendly custom eLearning courses.

Articulate Storyline 360 is the latest version equipped with lots of new features. Still there are few activities which do not come as default and need customization. One of them is Typing Animation. In Articulate Storyline, there is no feature for typing effect. We can create this effect by splitting the text and sync each character with the timeline which is time consuming task.

We created a plug-in for typing effect using JavaScript which will ease the work and saves lot of time.
Before we dive into the process, let’s take a quick peek at the sample we have created using this plugin in which all the typing animations are created using JavaScript:

Step 01

You can download the plugin from download section at the bottom.

Step 02

In Storyline 360, go to insert tab and click on “Web Object”. Then, insert “Typing Animation Plugin” folder and click OK.

Keep this web Object outside the design area so that it doesn’t appear on the screen.

Step 03

Create two text variables as shown. We created the variables and named them as follows.

TypeAnimate (variable1)
AnimateText (variable2)

Note: You can modify “AnimateText” variable name. But, do not modify “TypeAnimate” variable name.

Step 04:

Create a text box. In the text box add “AnimateText” variable.

Step 05

Create triggers as shown.

Trigger 1: Set “TypeAnimate” value when timeline reaches cue point.

Here you can add your content to animate the text.

In my case I have added ”TypeAnimate“ value equal to “Yes Godwin, what are you upto?”

Note: Here, we used cue point at which the animation should start. You can add this code to button or layer depending on your requirement.

Trigger 2: Execute JavaScript when timeline reaches cue point and paste the following code.

g_typeAnimate("AnimateText",100);

Note: In the above code “AnimateText” is the variable that holds text you want to animate and “100” is speed.

Now publish your content. Once done, you can test your project.

Note: This doesn’t work in preview mode and also doesn’t work in offline mode for chrome.

Preview Sample

Our Services: eLearning Services, Convert PPT to eLearning, eLearning Localization Services

Masoud says:

January 18, 2018 at 8:25 AM

Hi please can help me to codeing javascript?

Swift Elearning Services says:
January 18, 2018 at 9:55 AM

Please share your requirement here or you can send an email to [email protected]

Melissa says:

January 5, 2019 at 9:15 AM

I’m trying to get this to work in my current version of Storyline 360 (v3.22.17236.0) and can’t seem to replicate the typing effect that occurs in your demo/sample file. Is there something I need to update in the JavaScript for a newer version of Storyline?

Swift Elearning Services says:
January 7, 2019 at 5:33 PM

Hi Melissa,
Thanks for the comment. We have updated the code as per the latest version of Storyline 360. Now you can use the code which we provided in the above blog.
Thanks.

Marwa says:

September 22, 2019 at 4:13 PM

Hi , I’m sorry but I couldn’t find the plugin or download section
thanks for your help

Swift Elearning Services says:
December 14, 2019 at 12:27 PM

Hi Marwa, You can download the plugin at the end of the article by entering the data (email address and name). If you find any difficulty in downloading please let us know.