# Built-in Text Appearance / Vanishing Animations

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Tag</strong>: <code>&#x3C;fade-in></code></td><td><strong>Parameters</strong>: <code>d</code></td><td><a href="/files/F8TloxY49dwosTaVh82K">/files/F8TloxY49dwosTaVh82K</a></td></tr><tr><td><strong>Tag</strong>: <code>&#x3C;fade-out></code></td><td><strong>Parameters</strong>: <code>d</code></td><td><a href="/files/a9ziVxHbP3O0aE8j5m4Z">/files/a9ziVxHbP3O0aE8j5m4Z</a></td></tr><tr><td><strong>Tag</strong>: <code>&#x3C;offset-in></code></td><td><strong>Parameters</strong>: <code>d</code>, <code>x</code>, <code>y</code></td><td><a href="/files/ms10NfcpQ9XKgzFb4RvE">/files/ms10NfcpQ9XKgzFb4RvE</a></td></tr><tr><td><strong>Tag</strong>: <code>&#x3C;offset-out></code></td><td><strong>Parameters</strong>: <code>d</code>, <code>x</code>, <code>y</code></td><td><a href="/files/jMTeN34W7n1dgtjMSo0E">/files/jMTeN34W7n1dgtjMSo0E</a></td></tr><tr><td><strong>Tag</strong>: <code>&#x3C;random-in></code></td><td><strong>Parameters</strong>: <code>a</code>, <code>d</code></td><td><a href="/files/aSI4TsOuqMwczS45PEGC">/files/aSI4TsOuqMwczS45PEGC</a></td></tr><tr><td><strong>Tag</strong>: <code>&#x3C;random-out></code></td><td><strong>Parameters</strong>: <code>a</code>, <code>d</code></td><td><a href="/files/AUX22UkRplrakFpk9LwC">/files/AUX22UkRplrakFpk9LwC</a></td></tr><tr><td><strong>Tag</strong>: <code>&#x3C;size-in></code></td><td><strong>Parameters</strong>: <code>a</code>, <code>d</code></td><td><a href="/files/p0G9Uv8ZzUkOBdMwn25X">/files/p0G9Uv8ZzUkOBdMwn25X</a></td></tr><tr><td><strong>Tag</strong>: <code>&#x3C;size-out></code></td><td><strong>Parameters</strong>: <code>a</code>, <code>d</code></td><td><a href="/files/CD3b0RS0He0EZ778zX6J">/files/CD3b0RS0He0EZ778zX6J</a></td></tr><tr><td><a data-mention href="/pages/Spoh6KZjl3s07INjuOp3">/pages/Spoh6KZjl3s07INjuOp3</a></td><td><strong>Parameters</strong>: <code>a</code>, <code>d</code></td><td><a href="/files/NTcf6AV93QMfXqaxqPDG">/files/NTcf6AV93QMfXqaxqPDG</a></td></tr><tr><td><a data-mention href="/pages/Spoh6KZjl3s07INjuOp3">/pages/Spoh6KZjl3s07INjuOp3</a></td><td><strong>Parameters</strong>: <code>a</code>, <code>d</code></td><td><a href="/files/MLHyeWfQu4nScQCYfMUU">/files/MLHyeWfQu4nScQCYfMUU</a></td></tr></tbody></table>

### Parameter Types

<table><thead><tr><th width="178">Name</th><th>Description</th></tr></thead><tbody><tr><td><code>a</code></td><td><strong>Amplitude</strong>, the strength of an effect. A higher amplitude creates a stronger effect.<br>For example, the distance a letter moves in <code>random-in</code> or <code>random-out</code> or the target font size (in percent) for <code>size-in</code> and <code>size-out</code>.</td></tr><tr><td><code>d</code></td><td><strong>Duration</strong>, the time in seconds until the text has fully faded in or out.</td></tr><tr><td><code>x</code></td><td><strong>X Offset</strong>, the amount of horizontal offset.</td></tr><tr><td><code>y</code></td><td><strong>Y Offset</strong>, the amount of vertical offset.</td></tr></tbody></table>

## Changing text appearance / vanishing speed

The speed at which text is appearing and vanishing can be changed in the [Text Animation Settings](/text-animations/text-animation-settings.md). Make sure you've added your text animation settings object to your animated text element in UI builder, or the settings will not be applied to your element.

There is also a special control tag (`<speed>`) for speeding up or slowing down text dynamically, more in [Typewriter Control Tags](/text-animations/typewriting/typewriter-control-tags.md).

## Examples

<table><thead><tr><th width="452">Code</th><th>Explanation</th></tr></thead><tbody><tr><td><code>Example &#x3C;fade-in>text&#x3C;/fade-in>!</code></td><td>The word text uses the <strong>Fade in</strong> text appearance animation. If the <a data-mention href="/pages/u2YsdNO4kxnKeOrYDdbY">/pages/u2YsdNO4kxnKeOrYDdbY</a> have default animations, the fade-in is layered on top of them. <br>If the settings has <strong>Fallback Animations</strong> set up, the fade-in replaces them.</td></tr><tr><td><code>&#x3C;fade-in>&#x3C;fade-out>Example text</code></td><td>It's not necessary to close the tags at the end, if you want to change text appearance / vanishing animations for the whole text.</td></tr><tr><td><code>&#x3C;fade-in>Example &#x3C;size-in a=2>text&#x3C;/size-in>&#x3C;/fade-in></code></td><td>It's possible to layer different kinds of animations.</td></tr></tbody></table>

## Performance cost

The type and amount of animations you use should not significantly impact performance. Most of the performance cost is up-front when you set your text and is mostly dependent on the length of your text.

Check out the [Performance Optimization Guide](/text-animations/performance-optimization-guide.md) for more information.

***

Check out [Custom Animations](/text-animations/animations/custom-animations.md) and [Custom C# Animations](/text-animations/c-extensions/custom-c-animations.md) if you want to extend the asset with your own animations.

Is an important animation missing? Or maybe an animation tag doesn't support a parameter you'd like to use? Contact me via the [contact form](https://stixgames.com/contact/), or join my [Discord](https://discord.gg/jvBFhQA) and I'll try my best to help you!


---

# 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.stixgames.com/text-animations/typewriting/built-in-text-appearance-vanishing-animations.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.