# Add effects to your texts

## Categories Overview

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

<table data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><h3><strong>Behavior Effects</strong></h3></td><td></td><td><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2F931c1io2y1Y49ZjPbaEk%2FBehaviorEffect.gif?alt=media&#x26;token=d4d22bf6-d7aa-4e45-b1b5-ef39e89cab9d" alt=""></td><td>Behavior Effects animate letters continuously during time, as long as a letter is visible.</td><td></td></tr><tr><td><h3><strong>Appearance Effects</strong> </h3></td><td></td><td><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2FWailQ2eoOOyCWcd3Mbn0%2FAppearanceEffect.gif?alt=media&#x26;token=1a760597-3295-4b07-aa76-e8c3cc6c8387" alt=""></td><td>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.</td><td></td></tr><tr><td><h3><strong>Disappearance Effects</strong></h3></td><td></td><td><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2FzRtUPOqAihVERY2AKgI9%2FDisappearanceEffect.gif?alt=media&#x26;token=11a84d1d-33a8-4620-a949-2387db2937d2" alt=""></td><td>Disappearance Effects animate letters when they just became not-visible, and under the hood they’re simply Appearance effects in reverse.</td><td></td></tr></tbody></table>

{% hint style="info" %}
A list of built-in effects is available here: [built-in-effects-list](https://docs.febucci.com/text-animator-godot/effects/built-in-effects-list "mention")
{% endhint %}

## How to Apply Effects <a href="#how-to-apply-effects" id="how-to-apply-effects"></a>

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

* [#set-default-effects-to-the-entire-text](#set-default-effects-to-the-entire-text "mention") (inspector)
* &#x20;[#set-effects-to-specific-parts-of-the-text](#set-effects-to-specific-parts-of-the-text "mention") (rich text tags)

### Set default effects to the entire text <a href="#set-default-effects-to-the-entire-text" id="set-default-effects-to-the-entire-text"></a>

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

1. Head over to the TextAnimator node and  visit the "Default Tags" section

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2F9IQY142wjUcPPPKTc5VX%2Fimage.png?alt=media&#x26;token=9271e3ea-56e3-44a0-b509-1a74688ea80c" alt=""><figcaption><p>text animator default tags overview</p></figcaption></figure>

2. Expand the effect’s category you want to edit
3. Add any effect tag you want to include, example:

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2Fi3rP0Hs4xAAWyrhHp4aC%2FUsingDefaultTags.gif?alt=media&#x26;token=e658dd59-b892-4a97-ac93-e111b9dd2456" alt="" width="480"><figcaption></figcaption></figure>

{% columns %}
{% column width="50%" %}

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2F3C1lee92laHu4yWTz5Nv%2Fimage.png?alt=media&#x26;token=943c15cb-3cf5-4506-a4aa-2ec050b45411" alt=""><figcaption><p>In the <code>RichTextLabel</code> no tags were used</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2FbFYfeRdPRqlerz9f9R5d%2Fimage.png?alt=media&#x26;token=2faf5801-6082-414e-9079-939284b97c13" alt=""><figcaption><p>In the effects are inlcuded directly in the <code>TextAnimator</code></p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
&#x20;If you don’t want any effect applied by default, simply set the effects’ array size to zero.
{% endhint %}

{% hint style="success" %}
You can also change the "**Default Tags Mode**" to "**Constant**" if you want effects to be applied all the time, on top of everything.
{% endhint %}

{% hint style="danger" %}
Modifiers within default tags are not supported in the Early Access, but will ship for the full version!
{% endhint %}

### 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

{% hint style="info" %}
Once you close an effect tag, the letters will be affected again by the default effect (if any "Fallback" is set).
{% endhint %}

<details>

<summary>Example 1: Simple Effect</summary>

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”.

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2FIycWST6fmH7crBOqRXwz%2Fimage.png?alt=media&#x26;token=432a1e1e-bfc6-4441-95c2-265ff6009c03" alt="" width="443"><figcaption></figcaption></figure>

</details>

<details>

<summary>Example 2: Fallbacks</summary>

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``"

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2FyjpEUyaotdizH7KnaZxR%2FFallback.gif?alt=media&#x26;token=da74dfe1-5284-4699-aaa4-3657c41886e0" alt=""><figcaption></figcaption></figure>

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".

</details>

### Extra notes about Rich Text formatting <a href="#extra-notes-about-rich-text-formatting" id="extra-notes-about-rich-text-formatting"></a>

By using TextAnimator for Godot:

* :thumbsup: You can stack multiple effects together (e.g. “`<shake><size>`”).
* :thumbsup: You can close **all** currently opened effects with a single ‘`/`’ character, like:
  * ”`</>`” for Behavior Effects
  * ”`{/}`” for Appearance Effects
* :thumbsup: 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).

### Skipping tag parsing

In some cases you want to show a Text Animation Tag without it getting parsed. To do so you can use the "`<noparse>`" tag, which tells TextAnimator to skip elaborating a specific portion of your text and paste it directly as is.

{% hint style="info" %}
For instance, the sentence "`I'm <noparse><shake>freezing</shake></noparse>`" will be showed as "`I'm <shake>freezing</shake>`".
{% endhint %}

## Using Godot's built-in BBCodes

{% hint style="success" %}
Text Animator for Godot is fully compatible with the built-in Godot's BBCodes (see [Documentation](https://docs.godotengine.org/en/latest/tutorials/ui/bbcode_in_richtextlabel.html)).
{% endhint %}

To use bbcodes select your `RichTextLabel` and in the inspector, check the `BBCodeEnabled` flag.

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2F12uLtxbG9LAMQeUXMb4q%2Fimage.png?alt=media&#x26;token=03203660-b411-4c91-9170-0d469d7f0ec4" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
&#x20;You can now use both TextAnimator's and Godot's Tags to animate your text and unleash your creativity!
{% endhint %}

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2FEyvMMi86O8BHVxW7eHzH%2FCombiningTAnimAndBBCodes.gif?alt=media&#x26;token=bf5839b6-ad6d-4a93-9e05-453d7648a496" alt="" width="480"><figcaption></figcaption></figure>

<figure><img src="https://2263156596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FljONF14NORAywTLQL6Y1%2Fuploads%2FxEOuSATQaMArHwfMoHeo%2Fimage.png?alt=media&#x26;token=c944c64d-b277-41b5-9599-ff221aa33124" alt=""><figcaption><p>Combining TextAnimator and BBCode Tags</p></figcaption></figure>

{% hint style="info" %}
This works with Appearances as well :thumbsup:
{% endhint %}
