Forum Discussion

Nathan_Hilliard's avatar
Nathan_Hilliard
Community Member
3 months ago

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.