16 Replies
Bill Kelleher

I like the delayed solution, John. Very simple and elegant.

As John also mentioned, you can use wipe and set up separate lines. You can also use one large text box and select Sequence > By Paragraph, and as long as each line is a new paragraph line you'll get the same result while saving a little bit of time.

You could also set up a similar animation in Powerpoint using an appear animation  and animating the text by letter with a short delay between letters from the Effects Options panel. You can then screen capture this and add it to the timeline as a video.

Christie Pollick

Hi, Jim -- I see that Bill and John have already offered some really cool solutions, but if you'd like to check out a few recent threads on the same topic for additional ideas, please see the following:

Have text appear as if you are typing

Letter Typing Effect

Animate text - typing simulation 

Hope that helps! :)

Ash W


I realize this is an old post but....

I can't seem to get this wipe function to work on a paragraph. I don't want to divide it up into multiple text boxes and wipe each box because I will be using this often.  Did I do something wrong? I can't get this to work on each line with Paragraph selected.

I'm surprised this isn't a feature in SL3 since so many people have mentioned it in posts.


Alyssa Gomez

Sorry you're running into this, Ash! We're seeing a problem in Storyline 3 where the wipe animation doesn't work correctly when it's applied "by paragraph" in the HTML5 output. Our team is looking into a fix, and I'll keep you posted on any new information I receive. 

In the meantime, if you'd rather not break separate lines of text into individual text boxes, then you can get around this bug by viewing the Flash output. 

Michael Anderson

Ash, would this solution work for you? http://www.andersonelearning.com/demo/Typewriter_Effect_v1.0_SL3/story.html

Creating a new set of typed text is as easy as setting a variable in Storyline.

The auto-wrapping effect is more of that on a computer than on a typewriter, but that could be corrected. This same effect can be use in Storyline 2 just as easily.

Michael Anderson

Sharon, the first javascript trigger on the slide fires when the variable newText changes. The javascript code breaks down the text and displays one more additional character each time, which gives the typing effect. Here is the code in that trigger. Let me know if you have any questions.

var storylinePlayer = GetPlayer();
var newIncomingText = storylinePlayer.GetVar("newText");
var newOutgoingText = "";
var myArray = newIncomingText.split("");
var arrayLength = myArray.length;
function typeText() {
newOutgoingText = newOutgoingText + myArray[0];
arrayLength = myArray.length;
if (arrayLength == 0) {
// A letter is typed every 100ms, adjust the typing speed by changing the 100 number below
var myInterval = setInterval(typeText, 100);
Leslie McKerchie

Great news!  We just released Update 3 for Storyline 3. This includes quite a few important fixes and some new features as well. Check out all the details in the release notes here.  

The item you'll be interested in is:

Wipe animations sequenced by paragraph didn't work as expected in HTML5 output.

Be sure to download and install the latest version of Storyline 3.

Let us know if you have any questions, either here or by reaching out to our Support Engineers directly.