TMP Animated Text Advanced — Documentation

Bring TextMeshPro text to life with inline, tag-driven animations. You write tags in your string (e.g., <wobble>Hi</wobble>), the component parses them, strips tags from display text, and animates characters at runtime.

On this page

Setup
Tag syntax
Nesting Rich Text
Target Modes
Effects List

  1. Wobble
  2. Shake
  3. Wave
  4. Horiz. Wave
  5. Ripple
  6. Bounce
  7. Scale
  8. Spin
  9. Swirl
  10. Skew
  11. xFlip
  12. yStretch
  13. Glitch
  14. Type
  15. Fade
  16. Color Puls
  17. Rainbow

Best Practices
Troubleshooting

1) Setup

  1. Install via Package Manager

    • In Unity: Window → Package Manager → + (top-left) → Add package from git URL…

    • Paste: https://github.com/theproger93/ND-Toolbox → Add.

    • Unity fetches ND-Toolbox (includes TMP Animated Text Advanced).

  2. Add the component

    • Select your TMP object (has a TMP_Text/TextMeshPro component).

    • Add Component → TMPAnimatedTextAdvanced.

  3. Assign tagged text to the TMP component (or the script’s Source Text):

     
    Hello <wobble amp=2 speed=3><color=#ff6600>world</color></wobble>!

  4. Press Play

    • Tags are stripped from render; the wrapped characters animate.

2) Tag syntax

 
<effectName param1=value param2=value> Your text here </effectName>

  • Effect names are case-insensitive (<wobble>, <WOBBLE>, etc.).

  • Parameters are optional, order-independent, and use dot decimals (e.g., amp=1.5).

  • Colors support HTML forms like #FF6600 or #FF6600CC.

Common parameters used across effects

  • amp – amplitude/amount (movement, scale, etc.)

  • speed – speed of animation (units vary)

  • freq – wave frequency (cycles/second)

  • phase – phase offset for waves

  • duration – loop period in seconds (0 = infinite/continuous)

  • colorA, colorB – color endpoints for color effects

  • angle – degrees (skew/flip)

  • scale – target scale (for scale pulse)

  • fade – blend amount 0..1

3) Nesting rich text

Custom effect tags can wrap standard TMP rich text (<b>, <i>, <color>, <size>, etc.). Keep tags properly nested:

 
<wobble amp=2><b><color=#ff6600>Wobble</color></b></wobble>

  • ✅ Proper nesting: open → open → close → close

  • ❌ Overlaps/crossing tags aren’t supported (e.g., <a><b></a></b>)

4) Target Modes: ManualTags vs. AutoMatch

Two ways to choose which characters animate:

ManualTags

You mark ranges explicitly with custom tags in the text.

  • How it works: The component parses your tags (e.g., <wobble>…</wobble>), strips them from display, and animates the wrapped characters.

  • When to use: Dialog/UI strings you control; localized strings with embedded tags; precise, designer-authored moments.

  • Pros: Exact control; nests with TMP rich text; survives language/wording changes.

  • Cons: You must add tags to the text.

  • Example:
    Hello <wobble amp=2><b>world</b></wobble>!

AutoMatch

You describe a pattern, the component finds matches in the clean text and animates them.

  • How it works: You set a target word/phrase and options (case, whole word, index/all). The system finds those characters and applies the selected effect—no custom tags required.

  • When to use: Dynamic values or external text you don’t want to tag (scores, player names, rotating tips).

  • Pros: No tags; works with plain strings from code/localization.

  • Cons: Less precise; depends on matching rules and current wording.

  • Key options:

    • Match Text – word/phrase to target

    • Match Case / Whole Word

    • Apply to All Matches or a specific Match Index

Quick guidance

  • Want pixel-precise control and portable strings? → ManualTags.

  • Want to animate plain text coming from code/localization without editing it? → AutoMatch.

Tip: You can mix modes across different UI elements. If a plain-text update should stop previous AutoMatch ranges, switch that element to ManualTags for that update (no tags = no animated ranges).

5) Effects reference (description • parameters • examples)

Each example shows nested rich text to demonstrate compatibility.

5.1 Motion & deformation

wobble

Soft, organic movement in X/Y.
Params: amp (2), speed (3)
Example: Just <wobble amp=2><b><color=#ff6600>Wobble</color></b></wobble>.

shake

Perlin-like jitter in X/Y.
Params: amp (1.2), speed (14)
Example: Quick <shake amp=1.2 speed=14><b>Shake</b></shake>.

wave

Vertical sine wave per character.
Params: amp (8), freq (2), phase (0.2), duration (0)
Example: Soft <wave amp=8 freq=2><color=#00c6ff>Wave</color></wave>.

hwave (Horizontal Wave)

Horizontal sine wave per character.
Params: amp (6), freq (2)
Example: Big <hwave amp=6 freq=2><size=130%>Wave</size></hwave>.

ripple

Vertical ripple traveling across characters.
Params: amp (6), speed (2)
Example: Light <ripple amp=6 speed=2><b><color=#ffaa00>Ripple</color></b></ripple>.

bounce

Bouncy up–down with stagger.
Params: amp (8), freq (2)
Example: High <bounce amp=8 freq=2><size=120%>Bounce</size></bounce>.

scalepulse

Breathing scale around glyph center.
Params: amp (0.15), freq (2)
Example: Gentle <scalepulse amp=0.15 freq=2><size=115%>Scale</size></scalepulse>.

spin

Continuous rotation about glyph center.
Params: speed (rev/sec, default 0.8)
Example: Fast <spin speed=0.8><b><color=#66ccff>Spin</color></b></spin>.

swirl

Spin with a subtle radial “breath”.
Params: speed (0.8), amp (0.25)
Example: Soft <swirl speed=0.8 amp=0.25><b>Swirl</b></swirl>.

skew

Horizontal shear oscillation.
Params: angle (deg, 20), speed (1)
Example: Slick <skew angle=20 speed=1><b>Skew</b></skew>.

flipx

Simulated flip around X axis.
Params: speed (1.5), angle (max deg, 180)
Example: Quick <flipx speed=1.5 angle=180><b>Flip</b></flipx>.

stretchy

Vertical stretch (squash & stretch).
Params: amp (0.25), freq (2)
Example: Tall <stretchy amp=0.25 freq=2><size=120%>Stretch</size></stretchy>.

glitch

Chaotic jitter with occasional dropout.
Params: amp (1.5), speed (18)
Example: Noisy <glitch amp=1.5 speed=18><b><color=#00ffcc>Glitch</color></b></glitch>.

5.2 Reveal & color

typewriter / type

Reveals characters over time (one-shot by default).

Params: speed (chars/sec, e.g., 24), loop (0 = endless, N = repeat N times, default 1)
Examples:

  • Slow <typewriter speed=24><b>Typing</b></typewriter>. (one-shot)

  • Loop x3 <typewriter speed=24 loop=3><b>Typing</b></typewriter>.

  • Endless <typewriter speed=24 loop=0><b>Typing</b></typewriter>.

fade

Alpha pulsing (visible ↔ invisible).
Params: speed (1)
Example: Subtle <fade speed=1><b>Fade</b></fade>.

colorpulse

Lerps vertex colors between two endpoints.
Params: colorA (#ffffff), colorB (#ff3366), speed (2), fade (1)
Example: Bold <colorpulse colorA=#ffffff colorB=#ff3366 speed=2><b>Pulse</b></colorpulse>.

rainbow

Cycles hue across the range.
Params: speed (0.3)
Example: Bright <rainbow speed=0.3><b>Rainbow</b></rainbow>.

6) Best practices

  • Keep spans small for best readability (short words/phrases).

  • Combine channels smartly: motion + color looks great; two motion effects on the same letters don’t strictly add—last applied wins for position.

  • Nesting: always properly nest custom tags with TMP tags.

  • Dynamic text: you can safely update the TMP string at runtime; tagged lines animate, plain lines remain static.

  •  

7) Troubleshooting

  • Nothing animates → ensure your string still contains the custom tags when you set it. The component strips them internally afterwards.

  • Old animation persists after switching to plain text → ensure your controller (if used) forwards the new plain text to the animator, or just use the single-component flow.

  • Editor warnings after exiting Play → you’re already on the fixed version with safer editor guards.