Adobe

Examples and resources for text animation


For a video tutorial on animating text, go to the Adobe website at Adobe website.

Chris and Trish Meyer provide a video tutorial on the ProVideo Coalition website about entering, editing, formatting, and typesetting text.

Chris and Trish Meyer provide a video tutorial on the Focal Press website that demonstrates and explains text animation.

John Dickinson provides an overview of animation presets, including text animation presets, in a two-part tutorial on his Motionworks website. This two-part tutorial also demonstrates how to use text animators and selectors to create your own text animations or modify the animations created by animation presets:

John Dickinson provides a video tutorial on his Motionworks website that demonstrates animation of the Source Text property.

Harry Frank provides a tutorial on animating text with text animators on the Digital Arts Online website.

Aharon Rabinowitz provides a video tutorial on the Creative COW website that shows a few ways to make 3D extruded text in After Effects, using duplicate layers or the Shatter effect.

In the “After Effects Text Tips” series of video tutorials on the Creative COW website, Aharon Rabinowitz demonstrates how to use multiple text animators to create and fine-tune complex text animations.

Steve Holmes provides a tutorial on the Layers Magazine website that uses three text animators and per-character 3D text animation to create a text animation.

Colin Braley provides a tutorial and example project on his website that show how to use an expression on the Source Text property to animate text to overcome some of the limitations of the Numbers effect.

Eran Stern provides a set of video tutorials on the Creative COW website that show how to use the text animation features to create a variety of simple animations, including some that use punctuation and other non-alphanumeric symbols as simple vector graphics elements:

Eran Stern provides a video tutorial on the Creative COW website that demonstrates how to use per-character 3D text animation to animate text along a path in the shape of a 3D tornado.

Rhys Enniks provides a video tutorial on his website in which he uses expressions and multiple text animators and range selectors to animate text as if it is being typed onto a computer screen.

Angie Taylor provides a tutorial on the Digital Arts website that shows how to use per-character 3D text animation together with a common workaround for simulating extruded 3D text.

Eran Stern provides a video tutorial on the Artbeats website that shows how to use the After Effects text animation system as a particle system.

Rich Young collects several resources and tutorials for creating extruded 3D text in After Effects.

On the ProVideo Coalition website, Chris & Trish Meyer provide several tips for animating text in After Effects.

Toby Pitman shows tricks for using shape layers to animate text on the MacProVideo website.

    Example: Animate characters with per-character 3D properties

    This example illustrates how you can easily animate individual characters in 3D so that each character steps out of line and takes a bow.

    1. Create a new composition.
    2. Create a new text layer with the word ovation.
    3. Choose Animation > Animate Text > Enable Per-character 3D.
    4. Choose Animation > Animate Text > Position.
    5. Choose Animation > Animate Text > Rotation.
    6. In the Timeline panel, in the Animator group, set the X Rotation property to 45, and set the Position value to (0.0, 0.0, -100.0).
    7. Expand Range Selector 1.
    8. Click the stopwatch icon for the Offset property to set an initial keyframe with the value at 0 seconds.
    9. Set the Offset property value to -15%.
    10. Set the End property value to 15%.
    11. Move the current-time indicator to 10 seconds, and set the Offset value to 100%.
    12. Press the R key to show the Rotation properties for the entire layer.
    13. Set the Y Rotation value for the layer to -45, rotating the entire layer so that you can more easily see the 3D motion of the characters.
    14. Preview the composition.

    Example: Offset characters

    This example illustrates how you can easily animate random characters so that they gradually form a legible word or phrase by specifying a Character Offset value and animating the range selector.

    Animating the offset values for the characters in the word Galaxy
    1. Create a new composition.
    2. Create a new text layer with the word Galaxy.
    3. Choose Animation > Animate Text > Character Offset.
    4. In the Timeline panel, set the Character Offset value to 5.
    5. Expand Range Selector 1.
    6. Click the Start stopwatch to set an initial keyframe at 0 seconds and set the value to 0%.
    7. Move the current-time indicator to 5 seconds and set the Start value to 100%.
    8. Set Character Alignment to Center.
    9. Preview the composition.

    Example: Animate characters with the Wiggly selector

    This example demonstrates how easy it is to animate the position of individual characters. It also shows how the Wiggly selector can create a dramatic change to the animation simply by adding it to the layer.

    Animating the color and position of the characters in the word Galaxy
    1. Create a new composition.
    2. Create a new text layer with the word Galaxy and set the color to blue in the Character panel.
    3. Choose Animation > Animate Text > Position.
    4. In the Timeline panel, drag the y value of the Position property to the left until all of the characters are out of the frame.
    5. Expand Range Selector 1.
    6. Click the Start stopwatch and leave it at 0% at 0 seconds; then move the current-time indicator to 5 seconds and set Start to 100%.
    7. Preview the composition.
    8. Collapse the Animator 1 group.
    9. Make sure that nothing is selected except the text layer name in the Timeline panel, and choose Fill Color > Hue from the Animate menu. A new animator group, Animator 2, appears in the Timeline panel.
    10. Set Fill Hue to 1x+0.0.
    11. Expand the Range Selector 1 for Animator 2.
    12. Click the Start stopwatch and leave it at 0% at 0 seconds; then move the current-time indicator to 5 seconds and set Start to 100%.
    13. Preview the animation. The colors change now as they drop from the top of the screen, but they all use the same color and end up the same, original color.
    14. With Fill Hue selected, choose Selector > Wiggly from the Add menu.
    15. Expand the Wiggly Selector 1 property and choose Add from the Mode menu.
    16. Preview the composition.
      Note: If you add the Fill Hue property to Animator 1 and then add the Wiggly selector, both the position and the colors wiggle, instead of just the colors.

    Example: Animate text tracking

    This example shows you how easy it is to isolate characters when tracking a line of text. Using the Tracking and Line Anchor animator properties, you can easily move all but one or a few characters.

    Animating the tracking values for the characters 3579 (left and center) so that only the 7 in the middle remains (right)
    1. Create a new composition.
    2. Create a new text layer and type 3579.
    3. With the text layer selected, click the Center Text button in the Paragraph panel.
    4. Choose View > Show Grid.
    5. In the Timeline panel, select the text layer and choose Animation > Animate Text > Tracking.
    6. Make sure that Before & After is specified in the Track Type menu.
    7. Click the Tracking Amount stopwatch and leave the value 0 at 0 seconds.
    8. Move the current-time indicator to 5 seconds and drag the Tracking Amount value until all characters are off the screen.
    9. Preview the animation.
    10. With the current-time indicator at 0, take a snapshot of the Composition panel. You will use this snapshot, and the grids, to determine the original location of the number 7 at the end of the animation.
    11. Move the current-time indicator to 5 seconds.
    12. Click the Show Snapshot button.
    13. In the Timeline panel, select Animator 1 and choose Line Anchor from the Add menu.
    14. Drag the Line Anchor value until the 7 is positioned in approximately its original position in the center of the Composition panel.
    15. Click the Show Snapshot button in the Composition panel to see the exact location of the 7 in its original location. Adjust the Line Anchor value to position the character in the original location.
    16. Preview the animation.

    Example: Use selectors to animate specific words

    This example shows how to use selectors to limit an animation to a specific word.

    Animating the skew values in the characters in the word Speeding
    1. Create a new composition.
    2. Create a new text layer with the words Speeding Saucer.
    3. Choose Animation > Animate Text > Skew.
    4. In the Timeline panel, set the Skew value to 35.
    5. Expand Range Selector 1.
    6. Make sure the current-time indicator is at 0 seconds and click the End stopwatch.
    7. In the Composition panel, drag both selector bars to the left side of the S in Speeding.
    8. Move the current-time indicator to 2 seconds and drag the right selector bar to the right side of the g in Speeding.
    9. Preview the composition.

    Example: Create a write-on animation

    You can easily create the appearance of writing on the screen by using the Opacity animator property.

    Writing text on using the Opacity property
    1. Create a new composition.
    2. Create a text layer with the characters 01234.
    3. Choose Animation > Animate Text > Opacity.
    4. Set Opacity to 0%.
    5. Expand the Range Selector 1 and click the stopwatch icon for Start.
    6. In the Composition panel, drag the start selector to the left edge of the text (the value will be at 0).
    7. Move the current-time indicator to 5 seconds and drag the start selector in the Composition panel to the right edge of the text (the value will be 5).
    8. Preview the composition.
      Note: By default, the Smoothness property is set to 100%. To create a typewriter appearance, expand the Advanced property and set Smoothness to 0%.

    Example: Animate text with multiple selectors

    This example uses the selectorValue parameter in an Expression selector with the Wiggly selector to make a string of characters flash on and off randomly.

    1. Create a new composition.
    2. Create a new text layer.
    3. In the Timeline panel, choose Opacity from the Animate menu for the text layer.
    4. Expand the text layer and its animator in the Timeline panel.
    5. Select the Range Selector and delete it.
    6. Choose Add > Selector > Wiggly next to the Animator property group for the text layer.
    7. Choose Add > Selector > Expression. If the Wiggly selector doesn’t come before the Expression selector, drag the Wiggly selector above the Expression selector.
    8. Expand the Expression Selector.
    9. Expand the Amount property to reveal the expression. The following expression appears by default: 
      selectorValue * textIndex/textTotal
    10. Replace the default expression text with the following expression: 
      r_val=selectorValue[0]; 
if(r_val < 50)r_val=0; 
if(r_val > 50)r_val=100; 
r_val
    11. Set the opacity to 0%, and preview the composition.

    Example: Animate text position with expressions

    This example uses the textIndex and textTotal attributes with the wiggle expression to animate a line of text.

    1. Create a new composition.
    2. Create a new text layer.
    3. Expand the text layer in the Timeline panel to view the text properties. Add a Position animator group from the Animate menu.
    4. Delete the default Range selector, Range Selector 1.
    5. Add an Expression selector by selecting the Add menu, then choosing Selector > Expression. Expand the Expression selector to reveal its options.
    6. Expand the Amount property to reveal the expression. The following expression appears by default: 
      selectorValue * textIndex/textTotal
    7. Replace the default expression with the following expression: 
      seedRandom(textIndex); 
amount=linear(time, 0, 5, 200*textIndex/textTotal, 0); 
wiggle(1, amount);

      The linear method is used in this example to ramp down the maximum wiggle amount over time.

    8. Set the vertical position value. The greater the value, the more the characters wiggle.
    9. Preview your composition.

    Example: Animate text as a timecode display

     With no layers selected in the Timeline panel, double-click the Current Time Format animation preset in the Effects & Presets panel. (You can locate the animation preset by typing its name in the Contains field in the Effects & Presets panel.)

    A new text layer is created, with an expression on the Source Text property that makes the text show the current time in the time display format set for the project.

    You can use other expressions in the Global category to display time in another format.

    To see the expressions on a layer, select the layer and press EE.
    More Help topics

    Legal Notices   |   Online Privacy Policy