Typing Animation in Articulate Storyline 360

Typing_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.

WebObject-Typing_animation_in_Articulate_Storyline_360

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

WebObject_Outside-Typing_animation_in_Articulate_Storyline_360

Step 03

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

  1. TypeAnimate (variable1)
  2. AnimateText (variable2)

Variables-Typing_animation_in_Articulate_Storyline_360

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.

AnimateText-Typing_animation_in_Articulate_Storyline_360

Step 05

Create triggers as shown.

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

Trigger1-Typing_animation_in_Articulate_Storyline_360

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?”

AnimateText_Content-Typing_animation_in_Articulate_Storyline_360

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.

Trigger2-Typing_animation_in_Articulate_Storyline_360

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

10 replies
  2. Melissa
    Melissa says:

    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?

    Reply
    • Swift Elearning Services
      Swift Elearning Services says:

      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.

      Reply
    • Swift Elearning Services
      Swift Elearning Services says:

      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.

      Reply
  6. Markus
    Markus says:

    I’m always looking for ways to make my elearning courses more engaging, and this typing animation is a fantastic idea. Do you have any other creative tips for adding interactivity to elearning content?

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *