Add effects to your texts

Learn how to add effects to your text.

Categories Overview

Effects are divided in three categories, based on their functionality/application. They consist of:

Behavior Effects

Behavior Effects animate letters continuously during time, as long as a letter is visible.

Appearance Effects

Appearance Effects animate letters only when they’re appearing on screen. For this reason, they’re mostly used in combination with the typewriter, which shows letters one after another.

Disappearance Effects

Disappearance Effects animate letters when they just became not-visible, and under the hood they’re simply Appearance effects in reverse.

A list of built-in effects is available here: Built-in effects list

---

How to Apply Effects

You can set different effects to your text in two main ways:

• Set default effects to the entire text (inspector)

• Set effects to specific parts of the text (rich text tags)

Set default effects to the entire text

You can set which effect(s) will be applied to all letters by default in the TextAnimator component, without having to write effects tags for every text.

1. Head over to the TextAnimator component and visit the “Default Tags” section

   

   text animator default tags overview
2. Expand the effect’s category you want to edit

3. Add any effect tag you want to include, example:

If you don’t want any effect applied by default, simply set the effects’ count to zero.

You can also change the "Default Tags Mode" to "Constant" if you want effects to be applied all the time, on top of everything.

You can add Modifiers to each array element, like "shake a=5", read more here: Modifiers

Set effects to specific parts of the text

You can apply effects to specific parts of your text by using rich text tags, overriding the default ones (if any "Fallback" is present).

The effects tag will look like this:

• Behaviors: <tag> to open, </tag> to close

• Appearances: {tag} to open, {/tag} to close

• Disappearances: {#tag} to open, {/#tag} to close (basically an appearance tag with a # before it, to simply remind you that disappearances are appearances in reverse).

Once you close an effect tag, the letters will be affected again by the default effect (if any "Fallback" is set).

Be careful, do not use TMPro right text tag formatting!

Example 1: Simple Effect

Example: “I'm cold” can be written as “I'm <shake>cold</shake>” (in the text component) in order to apply a shaking behavior effect on the specific word “cold”.

Example 2: Fallbacks

Let's say that we have one default effect ("size"), but we want to apply a specific part of the text with the "fade" effect. We can achieve that result by writing: "default default `{fade}` fade fade fade `{/fade}` default default"

As you can see, the letters that are outside the "fade" tags will have the default effect(s) applied, while the part inside "{fade}" and "{/fade}" will only have "fade".

---

Extra notes about Rich Text formatting

By using TextAnimator for Unity:

• You can stack multiple effects together (e.g. “<shake><size>”). (also have a look at Styles)

• You can close all currently opened effects with a single ‘/’ character, like:

  • ”</>” for Behavior Effects

  • ”{/}” for Appearance Effects

  • ”{/#}” for Disappearance Effects.

• There is no need to close tags if you’re at the end of the text, since Text Animator starts applying effect from the moment you open a tag. (e.g. "<shake>hello" will result in hello already animating).