Animated text

Welcome to the community, Danny! So glad you've joined us. 😊

Check out this sample slide I created for you. Is that the effect you're going for?

If so, you can use that same effect in your file by following these steps:

• Select the text box.
• On the Animations tab, select the Wipe Entrance animation. 
• Click Effect Options, and select From Left.
• Click Effect Options again, and select By Paragraph at the bottom of the list. 
• Finally, be sure each line of text is a new paragraph by pressing the Enter or Return key for each new line. 

Let me know if that's what you had in mind! 

Thanks Alyssa for that option.  That is not exactly what I was looking for though. I was looking for the effect to look like I was typing each individual letter.  I have been playing with creating individual text boxes for each letter and then setting the timing that each box is played.  The effect of me typing is simulated and looks like someone is typing the word but the spacing between the letters is too hard to get consistent.

Hi Danny,

Perhaps you could conduct a screen recording of the typing occur, and add that as a small video on the slide? If you're using Storyline 360, you'd also have access to Peek 360 and Replay 360 - both of which would allow you to do easy screen recordings that can be exported for MP4. 

Hi Danny, 

I have done the reverse of what you are trying to do. I had the text already there then put white boxes over each letter. The nice part about that is then you only have to align it on the left, because if the right side is a little bigger it doesn't really matter. Then I just had them fade out, I had to play with that a little to get the timing right.  Hope that makes sense. It isn't an elegant solution but it works in a pinch. 

Thanks for that idea. I will try that since I also already have the words I want to use set up in bulleted format.

Something like this might work for a single field. Setup a variable called textInput and another for textOutput. Then set your textInput to the text you want to type.  After that's setup, use a %textOutput% on your stage and call the following in a Javascript trigger. 

This won't work locally. You'll need to either turn on local script execution for your browser or run it from a server. I haven't tested this. It's sort of off the top of my head. This will type at a varied speed if it works. Some characters will come quickly at the top speed (in ms) others will be about 80% slower. 

Could get complicated for multiple fields but should work pretty well for a single field. JS is pretty snazzy for stuff like this. *Edit to take out the top and bottom from the randomizer. Didn't have the desired effect.

var player=GetPlayer();
var i = 0;
var txt = player.GetVar("textInput");
var speed = 400;
//clear text output so it starts with nothing
player.SetVar("textOutput","");

function typeWrite() {
 textOutput=player.GetVar("textOutput");
 var speedMod=speed*Math.random();
 if (i < txt.length) {
 textOutput+= txt.charAt(i);
 player.SetVar("textOutput",textOutput);
 i++;
 setTimeout(typeWrite, speedMod);
 }
}

typeWrite();

Finally got a few minutes to test out the theory. Works out pretty well. You would need to modify it to use multiple different text blocks. I ended up speeding it up to 150ms as the base instead of 400. 

2 variables: textInput and textOutput (case sensitive)

2 triggers: set textInput to "YOUR TEXT" when timeline starts + Execute Javascript when timeline starts with the script above pasted in. 

Put your text block on screen with %textOutput% typed in.

https://360.articulate.com/review/content/3cb90e7b-4fd5-4847-8c5f-34b024f82b0c/review 

That is great Steve!

That is exactly what I want. Unfortunately I know nothing about programing/script writing.

"Unfortunately I know nothing about programing/script writing."

The perfect starting place for a Javascript obsession:) Copying and pasting the script into a JS trigger this one should work for you as long as there's only one text block you want to type per screen. 

If you run into problems or need help troubleshooting, you've got us to help. JS is such a handy thing for devs to learn. It's a like another language and is a great tool to have in your toolkit. Opens up doors on the web.

Hey Danny! I also wanted to mention that replying via email includes your signature with contact information in the public forum.  Feel free to edit your replies here!

Thank you Alyssa.

I know this was posted a few years ago, but I just started my SL journey recently and this was super helpful. Sucks that you can't preview it, but I love the effect. 

I'm glad that this older conversation was able to help you as well, Rumen. I appreciate you popping in to share, and welcome to E-Learning Heroes. 😊

Thank you, Steve! This is exactly what I was looking for. Now I am trying to tweak it so the next doesn't change to such a small size

I love that PowerPoint has this feature, but was frustrated that Storyline did not until I figured out an easy fix (assuming that the text only has one background color, and is not over an image or something else).

I created the text I needed and have it in a white box. This text is 3 lines.

Then, I created 3 rectangles of white that I placed over each of the 3 lines.

All of this appears at the same time at the beginning of the timeline on the slide.

Then, I created exit animations for each of the white rectangles. Wipe, From Left, 1.50 Seconds

The first line exits first, then the second, then the third. You could easily do this for more lines.

It looks very similar to what PowerPoint does for "by letter"

Here is a demo file for how I achieved this.

i am new to this, can anyone simplify this?