Skip to main content

Text Animations - How to apply animations on a text element

There are numerous ways in which animations can be applied to a text element. Custom animations and presets can be applied from the timeline, but you can also apply animations to your entire design, including text elements, using the Magic Animator.

Applying text animations in the editor

The most common text animations are called word animations, and you can find a few presets in the timeline under the name of Words Fade, and Words Blur.

  1. Select the text layer that you're looking to animate;
  2. Open the Timeline;
  3. Click on the animation enabler of the highlighted element;
  4. Select the animation that you want to apply.
    • You can either select Words fade or Words blur

1_Text_animation-editor.gif

Applying text animations in the Generator

Animations can also be applied in the Generator on multiple sizes at once. Just select a preset on one size, or create a custom one, and apply it from the Timeline to all of the other layouts available in your set.

  1. Double-click any available size to access single edit mode;
  2. Open the Timeline;
  3. Click on the animation enabler of the highlighted element;
  4. Select the animation that you want to apply;
    • You can either select Words fade or Words blur
  5. Open Advanced mode;
  6. Click on the Copy icon;
  7. Click on the dropdown arrow that becomes available next to the paste clipboard icon;
  8. Select all layouts.

2_Text_animation-generator.gif

You can apply additional adjustments to the animation by accessing Advanced mode where you can modify:

  • Words duration;
  • Preset;
  • Ease type;
  • Tween type.

Note: If you're using a custom font, and downloading HTML or AMP designs, you will have to make use of the "Convert custom font to SVG" function. In this case, word animations will not work as this feature converts the entire text box into one image. As a workaround, you can create individual text boxes for each word, apply alpha animations to each text box, and adjust their position and timing in the timeline.

Related articles