Becoming a Digital Publishing Master with in5

Images from apps and sites created with in5.

This course will teach you how to use InDesign and in5 to create beautiful and accessible sites and mobile apps. Learn to become a master of digital publishing from the ground up by using familiar design tools.

For full course details, visit the main course page.

Lesson 22: How to Create A Typewriter Effect

One of the classic animations for type is making it look like the text is being typed by a typewriter. This effect is easy to achieve in InDesign, if you know this little tweak in the settings. Expert Diane Burns will show you how in this lesson.

Expert Contributors to this lesson

Diane Burns

Diane Burns

Author and Trainer

Today's Course Outline

  1. Breaking Text into Characters
  2. Animating the Characters
  3. Perfecting the Animation

Estimated time for lesson

Today’s lesson should take approximately 15 minutes.

First, type and format the text in InDesign that you want to have the typewriter effect.

the initial text

Breaking Text into Characters

Next, you’ll need to separate each letter so that each can come in one-by-one. You can use the Ajar Productions Split Text extension.

Once the extension is installed, select your text frame, then run the script from the Scripts panel (Window > Utilities > Scripts).

Choose the Split By option for every character.

the Split Text extension options

Once you run the script, each letter will sit in its own text frame.

the text broken into characters

Animating the Characters

Select all the text frames.

Pro tip: The order in which objects are selected determines the order in which they’ll be animated. In this case, the Split Text script leaves the order of the text frames in the correct order they appear in when typed, so you can simply use Select All or marqee the text frames.

With each text frame selected, from the Animation panel (Window > Interactive > Animation) choose the Preset Appear.

In the Timing panel, you can see that all the letters will animate in the correct order.

the animation settings

At this point, you can preview the animation in the EPUB Interactivity panel (or the SWF Panel in older versions of InDesign) by clicking the Preview button in the lower left-hand corner of the Animation or Timing panel.

But the first thing you’ll notice is the animation is much too slow.

We’ll make some custom adjustments to the Appear preset in the Animation panel that will speed things up.

Perfecting the Animation

Select all the text frames and make sure the Animation panel is open.

In the Animation panel, change the speed to .125 seconds (the lowest setting possible).

If you preview again, you’ll see that none of the characters show up.

This is because there is an opacity change in the Appear preset that interferes with the text showing up as expected.

To remove the Opacity change, use the Opacity pop-up menu and set it to None.

If you preview the animation now, you’ll see that all the letters appear at once.

This is because the speed is so fast they just all appear at the same time, which is not what we want.

We want each text frame to wait it’s turn. So finally, check on the Visibility Hide Until Animated. This will cause the text frames to appear one after the other.

the Timing Panel showing animated character sequence

Now we’re all set. Each letter comes in quickly, one after the other, just like they would if they were being typed by a fairly fast typist (not me smiley).

A typewriter effect from InDesign in minutes!

Here's a live example exported with in5.

Take Aways

  • The Split Text extension can be used to break up characters.
  • You can apply animation with multiple objects selected.
  • The Timing Panel lets you change the order of animated objects.
  • Use the Hide Until Animated setting to force objects to wait their turn until displaying.

For more on creating animation FX with InDesign, check out Diane's Creating Animations with Adobe InDesign CC course on Lynda.com.