> For the complete documentation index, see [llms.txt](https://docs.stixgames.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stixgames.com/text-animations/typewriting/built-in-text-appearance-vanishing-animations.md).

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