Forum Discussion
Typing or Typewriter Animation for Storyline Textboxes
Updated 7/8/2024.
I've seen many questions about typing and typewriter-like effects pop over the years. While some workable solutions have been posted, they often lack flexibility or rely on outside software. I've been sharpening my skills in scripting in Storyline lately and thought this could be a good project.
I've created an (updated) example project that demonstrates an easy-to-use typing simulation. It also offers a few options for customization. One valuable feature is that it allows you to maintain most of the formatting in your text box (e.g., fonts, sizes, styles, colors, etc.) It also offers optional sound and animation effects. These should work on both Chrome and Firefox. Firefox still exhibits a few quirks, however.
Once the JavaScript is put into place (one main routine and one small piece to set up a few variables), and a few SL variables are created, then you can just set a couple of variables to make your textbox type into place. You can have multiple textbox animations on one slide.
For best project use, the main JavaScript and its trigger should probably go on the Master slide base layer. The smaller settings script goes on each slide that will use the effect.
This has a few potential uses, so feel free to try it out in your projects. I have attached the .story file.
P.S. - There is a free typewriter font you can install first for the best visual effect.
The sounds are included as Base64 strings ,and could easily changed out to suit your needs.
I have updated this example. and the files in the post. Fixed Firefox sounds and added an optional character animation effect. Firefox animations might be quirky. Maybe I'll look into it again sometime.
It should be useful in some projects, or to learn more about manipulating Storyline objects in JavaScript.
Try it: https://360.articulate.com/review/content/2b3265eb-efc6-4519-b703-80d40207c176/review
Hmm... I can't seem to update my own post.
Anyway, I updated this project by adding some adjustable randomness to the typing speed to make it seem more realistic. I've attached the updates files here.
Demo: https://360.articulate.com/review/content/b6ec87e2-f19e-4b4a-9b49-6e5121f00b7d/review
Fixed the link here.
A cool example. Thanks!
Hi Nathan,
Awesome example, thanks for sharing! Question: From your file, i'm trying to isolate one line of text, so I can use it for my own projects. Unfortunately, I'm not (yet) a Javascript expert. The moment I remove one object in Articulate Storyline, the effect of the typing machine doesn't work anymore.
Could you explain how to shorten your example to one piece of text where you can pre-enter the parameters you showed?
Thanks a lot!
Rutger
I have attached a simplified demo here. Main points would be:
- Make sure you have all of the Storyline variables set up to match these, with the initial values as required
- The initialization script (first JavaScript Trigger in the list) has a textKeyList variable that lists the text keys for each textbox you will be using on the slide. This is for the first initialization, which is done using an empty textKey variable. If you only use one one textbox, make sure to edit this list to match the single text entry. Also, make sure the accessibility tag asigned by Storyline matches the text you entered, or at least the textKey value you are using.
- textKey only has to be long enough to uniquely identify each textbox by its content
- Make sure you don't assign a default value to the textKey variable (in the Storyline variable list). It need to be blank when first being initialized.
- To change the way things are typed, modify the variables (as listed in the initialization script (step 2)) before you toggle typeTextNow
- Make sure to set textKey to the value appropriate for your target textbox before toggling typeTextNow
- To reset a textbox, set initializeText to true before toggling typeTextNow
Simplified Demo: https://360.articulate.com/review/content/93beee0f-5dba-4334-8f96-2e6ace215c61/review
Thanks for your reply Nathan_Hilliard . I feel like i've done everything you said, still I can't get it working when I'm copying your method into my own slide. I added my own Storyline document as an attachment. Can you spot what I've missed?
