# Show and hide letters dynamically

<mark style="background-color:yellow;">**You can use a Typewriter to show and hide letters dynamically**</mark><mark style="background-color:yellow;">,</mark> choosing different pauses for any kind of characters (punctuation, letters, \[…]), trigger events and more.

***

## Showing Text <a href="#showing-text" id="showing-text"></a>

The typewriter contains general settings and events listeners, and allows for different pauses/timing modes:

* **By Character**: shows one letter after the other.
* **By Word**: progresses text word after word.

{% hint style="success" %}
This new architecture (from 3.0) allows you to change typewriter timings during development (for whatever reason) while keeping event references and settings intact! <3
{% endhint %}

**Your typewriter should look like this:**

{% tabs %}
{% tab title="Text Mesh Pro" %}
From the TypewriterComponent in the Inspector:

<figure><img src="/files/zywIb265ZoSuVN5xrfts" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="UI Toolkit" %}
From the AnimatedLabel in the the UI Builder:

<figure><img src="/files/W89fscs0p34GMCelaNLP" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Make sure to assign the timings scriptable object, or the typewriter will show the entire text instantly!
{% endhint %}

***

You can start the typewriter in two main ways:

### A) Via Code (Recommended) <a href="#a-via-code-recommended" id="a-via-code-recommended"></a>

If you want to use the typewriter, **it is recommended that you set the text directly to that component via code.**

{% tabs %}
{% tab title="Text Mesh Pro" %}
If you are using TextMeshPro, please replace scripts that reference TMPro or Text Animator ([Setting up texts](/text-animator-unity/effects/setting-up-texts.md)) and reference `Febucci.TextAnimatorForUnity.TypewriterComponent`  instead.

* :x: Don't: “`tmproText.text = textValue;`” , or "`textAnimator.SetText(textValue);`"&#x20;
* :white\_check\_mark: Do:  `typewriter.ShowText(textValue);`
  {% endtab %}

{% tab title="UI Toolkit" %}
Via UI Toolkit, the `AnimatedLabel` already has a "`Typewriter`" value that you can interact with!\
You don't need to do anything else, except for making sure you have assigned typewriter delays.
{% endtab %}
{% endtabs %}

### B) Automatic recognition <a href="#b-via-the-easy-integration" id="b-via-the-easy-integration"></a>

In case you haven't followed the step above, TextAnimator will still try to start the typewriter automatically if you have added a Typewriter component or have set up "Timings" through the AnimatedLabel in UI Toolkit.&#x20;

{% hint style="warning" %}
Easy Integration might happen one frame behind (as it has to discover that something has changed first, which usually was done on the previous frame, and then start the typewriter). If this is an issue, either follow the step [Show and hide letters dynamically](/text-animator-unity/typewriter/show-and-hide-letters-dynamically.md#a-via-code-recommended), or see [Troubleshooting](/text-animator-unity/other/troubleshooting.md#when-i-set-the-text-i-see-the-previous-one-for-one-frame-before-showing-the-new-one)
{% endhint %}

***

## Controlling Letters

### Start and Stop Typing <a href="#start-and-stop-typing" id="start-and-stop-typing"></a>

Inside the component’s Inspector you’ll find some options to control how the typewriter start should be triggered:

* `Start Typewriter Mode`: tells the typewriter when to start showing letters.

<table><thead><tr><th width="300">Value</th><th>Explanation</th></tr></thead><tbody><tr><td><strong>From Script Only</strong></td><td>The typerwiter can only be started by invoking <a href="https://www.api.febucci.com/tools/text-animator-unity/api/Febucci.UI.Core.TypewriterCore.html#Febucci_UI_Core_TypewriterCore_ShowText_System_String_">TextAnimatorPlayer.StartShowingText()</a></td></tr><tr><td><strong>OnEnable</strong></td><td>The typewriter starts every time the gameObject is set active</td></tr><tr><td><strong>OnShowText</strong></td><td>The typewriter starts as soon as a new text is set (<a href="#showing-text">as explained in the “Showing Text” section</a>)</td></tr><tr><td><strong>Automatically From All Events</strong></td><td>All of the above</td></tr></tbody></table>

* `Reset Typing Speed At Startup`: true if you want the typewriter’s speed to reset back to 1 every time a new text is show, otherwise it will save the last one used.

{% hint style="success" %}
You can pause the typewriter at any time by invoking `typewriter.StopShowingText()`, and you can start/resume it by invoking `typewriter.StartShowingText()`.
{% endhint %}

### Skip the Entire Text <a href="#skip" id="skip"></a>

To Skip the entire typewriter, you can invoke the `typewriter.SkipTypewriter()` method.

You can also find a few options to control how it behaves:

* `Hide Appearances On Skip`: true if you want to prevent appearance effects from playing whenever the typewriter skips (meaning that the text will be shown instantly).
* `Trigger Events On Skip`: true if you want to trigger all remaining events once the typewriter skips (be careful with that if you’re running some game logic with them, as everything will be run at once). Read more about events here: [Trigger Events when typing](/text-animator-unity/typewriter/trigger-events-when-typing.md)

### Skip Specific Parts of the Text

{% hint style="warning" %}
This feature is under testing for 3.0 and will be restored from the next version very soon! Thanks for your understanding!
{% endhint %}

### Hiding Text <a href="#hiding-text" id="hiding-text"></a>

You can hide letters dynamically via script, by invoking `typewriter.StartDisappearingText()`, and you can also stop it at any time by invoking `typewriter.StopDisappearingText()`.

***

{% hint style="info" %}
You can create your own timing waits (read [here ](/text-animator-unity/writing-custom-classes/writing-custom-typing-waits-c.md)how via C#) or you can use the built-in ones.
{% endhint %}

## Options <a href="#options" id="options"></a>

Typewriters might share the same settings and also have specific ones, so be sure to hover the mouse cursor above its fields in the Inspector to show the tooltips for each one.

Here is a quick overview of the most important/common ones:

### Callbacks (Unity Events) <a href="#callbacks-unity-events" id="callbacks-unity-events"></a>

You can use Unity Events that will be triggered based on the typewriter activity (example: when it just ended showing text).

<figure><img src="/files/KkHmBLPGo8QTZkbVl8YT" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="288">Event</th><th>Explanation</th></tr></thead><tbody><tr><td><code>OnTextShowed</code></td><td>Event called after the entire text has been shown (<em>if you’ve set “Use Typewriter” to true, it will wait until all letters are shown</em>)</td></tr><tr><td><code>OnTextDisappeared</code></td><td>Called as soon as the script starts hiding the last letter</td></tr></tbody></table>

The following below only work if the “**use typewriter**” is set to **true**:

<table><thead><tr><th width="288">Event</th><th>Explanation</th></tr></thead><tbody><tr><td><code>OnTypewriterStart</code></td><td>Called right before the typewriter starts showing its first letter.<br>It doesn’t work if the typewriter is off, since it would coincide with the “OnTextShowed” event <em>(in this case you can use that one instead)</em></td></tr><tr><td><code>OnCharacterVisible(Char)</code></td><td>Called each time a character became visible</td></tr><tr><td><code>OnMessage(EventMarker)</code></td><td>Invoked every time the typewriter meets a message/event in text. Read more about events <a href="/pages/h5O4iRXnjNig3xPDmP5P">here</a></td></tr></tbody></table>

{% hint style="info" %}
A typewriter uses its linked Text Animator **Time Scale** to progress time (you can read more here: [Animator Settings](/text-animator-unity/effects/how-to-add-effects/animator-settings.md#time-scale)), meaning that if the time is set to "Unscaled", then the typewriter will progress even if your game is paused.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.febucci.com/text-animator-unity/typewriter/show-and-hide-letters-dynamically.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.