Add animated text effects

Text effects are not supported in image ads or AMPHTML ads.

Text effects - Google Web Designer

You can add animated effects to text elements in Google Web Designer, such as a typewriter-style effect that makes one letter appear at a time. Text effects are set in the Text Effects panel. (If you don't see this panel, open it from the Window menu.)

An example of the Typewriter text effect

Add a text effect

You can add a text effect to a text element by following these steps:

1. Select the point in the timeline when you want the text effect animation to begin.
2. Select the text element that you want to apply the effect to. (You can only apply text effects to a single element at a time.)
3. In the Text Effects panel, select the effect that you want from the Effect dropdown:

   Blur Drop in Gradient Flip

   Line up Roll Scroll Slide

   Spin Spread Typewriter Zoom

4. Click the Add button.
5. Adjust the text effect properties in the panel. (An explanation of the properties for each effect can be found below.)

A layer for each text effect is added to the Advanced mode timeline below the text element layer.

Unlike element layers, text effect layers don't support looping or visibility handles. They are always attached to their associated text element layer, so they also can't be reordered, locked, or hidden independently, and share the text layer's visibility range.

You can add multiple text effects in succession to the same text element, but they can't be applied at the same time — that is, the effects can't overlap in the timeline.

Preview a text effect

In the Text Effects panel

You can check how a text effect appears in the preview pane at the top of the Text Effects panel. The words "TEXT EFFECTS" will animate using the current set of text effect properties. (If a text effect hasn't been added yet, the default properties for the selected effect will be used.) Use the following preview controls:

• Play - Play the text effect preview.

• Loop - Continuously loop the preview when it's playing.

• Pause - Pause the preview while it's playing.

On the stage

Text effects are shown on the stage, reflecting the current time in the animation timeline. Press the Play button in the timeline to preview the text effect animation along with any other elements on the stage.

If you use the Text tool to edit the content of a text element that has a text effect applied, the effect will be temporarily disabled so that you can see the full text.

Manage text effects

Although you can add text effects while using the Quick mode timeline, you should switch to the Advanced mode timeline to manage existing effects.

Adjust the timing of a text effect

By default, a text effect is added at the current playhead position in the timeline with a duration of 2 seconds. You can change the text effect's start time or duration:

• To change the duration in the Text Effects panel: Enter a new value in seconds in the Duration field, or drag the slider.

• To change the duration in the timeline: Hover over the left or right edge of a text effect span until a bar appears, then drag the edge along the timeline. Dragging the left edge also changes the start time of the effect.

• To change the start time without altering the duration: Drag the entire text effect span to the point in the timeline where you want it.

Edit a text effect's properties

Each effect can be customized:

1. Select the text effect in the timeline.
2. Adjust the properties in the Text Effects panel.

You can edit the duration and easing of any text effect animation. Most effects can also be configured to animate per letter, word, or line, or even in clusters of letters, words, or lines.

Check the list of effects to see the properties available for each effect.

Switch to a different text effect

You can change which type of effect you want to apply to your text.

1. Select the text effect in the timeline.
2. In the Text Effects panel, select a different effect in the Effect dropdown.

Remove a text effect

You can use either of the following methods to remove a text effect:

• Right-click the text effect in the timeline, then select Delete from the pop-up menu.
• Select the text effect in the timeline, then press the Delete key.

Effects

Each effect can be customized by adjusting its properties.

Blur

The text comes into focus after being blurred.

Blur properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Blur	The maximum blur radius, in pixels.
Opacity	The starting opacity of the text, as a percentage. When the Reverse box is checked, this field sets the ending opacity instead.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line All at once If you select anything other than "All at once", you can also animate sets of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, ending with blurred text.

 

Drop in

The text drops into place from above (along the z-axis).

Drop in properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Offset	How far the text moves along the z-axis, in pixels.
Opacity	The starting opacity of the text, as a percentage. When the Reverse box is checked, this field sets the ending opacity instead.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line All at once If you select anything other than "All at once", you can also animate sets of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, with the text lifting off of the surface.

Gradient

The text is revealed through a linear gradient mask.

Gradient properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Angle	The angle of the gradient, in degrees.
Opacity	The opacity of the gradient mask.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line All at once If you select anything other than "All at once", you can also animate sets of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, concealing the text with a gradient mask.

Flip

The text is flipped vertically (along the x-axis) until it lies flat.

Flip properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Direction	Select where to position the axis of rotation: From top From bottom From center
Rotation	How far to rotate the text, in degrees.
Opacity	The starting opacity of the text, as a percentage. When the Reverse box is checked, this field sets the ending opacity instead.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line All at once If you select anything other than "All at once", you can also animate sets of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, ending with rotated text.

Line up

The text moves vertically into position.

Line up properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Direction	Select the origin of the text movement: From top From bottom
Offset	How far the text moves along the y-axis, in pixels.
Opacity	The starting opacity of the text, as a percentage. When the Reverse box is checked, this field sets the ending opacity instead.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line All at once If you select anything other than "All at once", you can also animate sets of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, with the text moving out of position.

Roll

The text is rotated along the z-axis until it is straight.

Roll properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Direction	Select where to position the axis of rotation: From top From bottom From center
Rotation	How far to rotate the text, in degrees.
Opacity	The starting opacity of the text, as a percentage. When the Reverse box is checked, this field sets the ending opacity instead.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line All at once If you select anything other than "All at once", you can also animate sets of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, ending with rotated text.

Scroll

The text scrolls vertically into view and then away.

Scroll properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Type	Select: Regular - The text is unchanged as it scrolls. Vanishing point - The text slants as it appears to scroll toward a horizon in the distance.

Slide

The text slides into place as though from outside the text container.

Slide properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Direction	Select the origin of the text movement: From left From right From bottom From left
Opacity	The starting opacity of the text, as a percentage. When the Reverse box is checked, this field sets the ending opacity instead.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line All at once If you select anything other than "All at once", you can also animate sets of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, with the text sliding out of the container.

Spin

The text rotates along the y-axis until it lies flat.

Spin properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Direction	Select where to position the axis of rotation: From right From left From center
Rotation	How far to rotate the text, in degrees.
Opacity	The starting opacity of the text, as a percentage. When the Reverse box is checked, this field sets the ending opacity instead.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line All at once If you select anything other than "All at once", you can also animate sets of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, ending with rotated text.

Spread

The text moves into place horizontally.

Spread properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Direction	Select the origin of the text movement: From right From left
Offset	How far the text moves along the x-axis, in pixels.
Opacity	The starting opacity of the text, as a percentage. When the Reverse box is checked, this field sets the ending opacity instead.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line All at once If you select anything other than "All at once", you can also animate sets of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, with the text moving out of place.

Typewriter

The text appears one piece at a time.

Blur properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Opacity	The starting opacity of the text, as a percentage. When the Reverse box is checked, this field sets the ending opacity instead.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Fade in	Check this box if you want the text to fade in when appearing.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line You can also animate groups of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, with the text disappearing.

Zoom

The text grows in size.

Zoom properties

Duration	How long it takes for the entire animated effect to complete, in seconds.
Easing	How the animation accelerates and decelerates. Learn more about easing.
Scale	The maximum amount to scale up the text, as a percentage. For values over 100%, the text will scale back to its regular size afterward.
Opacity	The starting opacity of the text, as a percentage. When the Reverse box is checked, this field sets the ending opacity instead.
Speed	How quickly each letter, word, or line begins animating after the previous one. For example, a value of 0.25 for a letter-by-letter effect means that when a letter has completed ¼ of its animation, the next letter will begin animating.
Sequence	Select how the effect progresses through the text: Letter-by-letter Word-by-word Line-by-line All at once If you select anything other than "All at once", you can also animate sets of letters, words, or lines together. Specify either the grouping size or the total number of groups: Grouping size - Select this option if you know how many letters, words, or lines you want animated together in a cluster. The default value of 1 applies the effect to each individual letter, word, or line at a time. Total groups - Select this option if you want to divide your text into a specific number of groups. A value of 1 animates the full text simultaneously.
Randomize order	By default, each group of letters, words, or lines is animated from left-to-right and top-to-bottom. Select this option if you want to shuffle the animation order. Once randomized, the order remains unchanged until the text or text effect properties are modified in a way that affects the sequence. Deselecting and reselecting this option will reshuffle the order.
Reverse	Play the animation effect backwards, ending with the text scaling down until it disappears.

Text effect easing

The easing affects how the text effect animation speeds up or slows down as it progresses. By default the easing is linear, which sets a steady speed throughout the text effect. You can change the easing to one of the following presets in the Text Effects panel's Easing dropdown:

Linear	Animations run at a constant speed.
Ease-in	Animations start slowly, then finish quickly.
Ease-in-fast	Animations start slowly, then finish at medium speed.
Ease-in-slow	Animation start very slowly, then finish quickly.
Ease-in-out	Animations start and end slowly, but move quickly in the middle.
Ease-out	Animations start quickly, then slow towards the end.
Ease-out-fast	Animations start very quickly, then slow towards the end.
Ease-out-slow	Animations start at medium speed, then slow towards the end.

To visualize these easing options in Google Web Designer, select Easing options... to open the Easing dialog.

Custom easing

You can customize the easing for a text effect instead of using one of the preset options:

1. Select the text effect in the timeline.
2. In the Text Effects panel, in the Easing dropdown, select Easing options...
3. In the Easing dialog, select Custom.
4. Use one of the following methods to change the easing:
   • Drag the control handles to adjust the shape of the easing curve. The angle of the control handle controls the amount of curve, and the length of the handle controls the strength of the acceleration or deceleration.
   • In the Cubic-bezier field, enter the cubic-bezier() functional notation of the Bézier curve you want. If you enter an invalid value, the field will be underlined in red.
5. Click Apply.