How to make it appear like text is being typed?

Hi Jim. You could either do a wipe animation on each line of text or you could do like 'Liveperson' and other organisations do by having a notification pop up saying 'Customer Advisor is typing...' and then have your regular text pop up as a whole.

Hope that helps,

John

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.

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! :)

Hi everyone and Happy New Year!

I've just tried Bill's suggestion of using the Sequence>by paragraph animation on a text box and it works a treat!

Thanks for sharing.

Hi,

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.

Thanks,

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. 

Thanks Alyssa, :)

Just curious, is the an issue with HTML5 or with Storyline?

Thanks!

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.

Hi Ash,

The bug only happens in the HTML5 output, but the Flash output works normally. Michael's solution seems to be a great workaround. Let us know if that will work for what you had in mind!

Hi Michael, could you share how you were able to create this effect in your example?

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];
 myArray.shift();
 storylinePlayer.SetVar("displayText",newOutgoingText);
 arrayLength = myArray.length;
 if (arrayLength == 0) {
 clearInterval(myInterval);
 }
 }

// A letter is typed every 100ms, adjust the typing speed by changing the 100 number below
var myInterval = setInterval(typeText, 100); 

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.

Thanks so much Michael, this is a really great technique for animating text :-)

I'm glad you liked it. Thanks!

Thanks for sharing Michael, did just what I wanted.

I'm glad it worked for you Andrew. I'm working on a new project and think I'll use it there just for fun. :)