Getting started with TMPAnimator

After adding TMPEffects to your project, add a TMPAnimator component to a GameObject with a TMP_Text component (either TextMeshPro - Text or TextMeshPro - Text (UI)).

Applying your first animation

Write some placeholder text in the TextMeshPro's component textbox. Analogous to TextMeshPro's built-in rich text tags (e.g. <color>, <s>), you can add animations to your text by simply adding animation tags. Try adding <wave> before your placeholder text, and then hitting the Toggle Preview button in the TMPAnimator's inspector. In the scene and game view, you should now see that your text is being animated. It should look something like this:

⚠️ If the <wave> tag is still visible in the scene / game view, the tag is not being correctly processed. Make sure to use the default database by toggling Use default database in the TMPAnimator inspector's Animations foldout.

You can close the animation using </wave>. Only text between the opening and closing tag is animated.

Modifying the animation

Optionally, you can pass various parameter to animation tags. For example, the <wave> tag supports amplitude and uniformity, among others. You could modify the tag like so: <wave amplitude=10 uniformity=0.5>, which should result in something like this:

Try to play around with these two values to get something you like! Theres a lot more customization you can apply for almost all animation tags; a complete overview of all tags and their respective parameters can be found in Built-in animations.

Stacking animations

First, close the <wave> if you haven't already. After the closing tag, add another tag, <palette>, as well as some text after this tag that will be animated by it. Your text should look like this now: "<wave> *Text* </wave> <palette> *More text* </palette>", although you will notice the last closing tag is completely optional in this case. The animated text should look like this:

If you now remove the closing </wave> tag, the second text will be animated by both tags (assuming the Animations override toggle in the Animator settings foldout is set to false, which it will be by default). It should look something like this:

In this manner, you can stack a (theoretically) limitless amount of animations. Of course, there's no guarantee all combinations will mesh well together 😉

If you switch the Animations override toggle in the TMPAnimator's inspector to true, the second text will be animated as before. This toggle only defines the default behavior of animation tags; you can decide whether a tag should override the previous tags individually by adding the override parameter to a tag, like so: <palette override=true>. All animation tags support this parameter.

Late animations / second pass

Another parameter supported by all animation tags is late, and is used like so: <wave late>. If set, the animation will be applied in a second pass within the TMPAnimator, meaning it will be applied after all animations that do not have this parameter.

You will not need this parameter in the large majority of cases. It is useful primarily for when you need the mesh data of the character to consider the changes made by the other animations. For example, the flashlight effect shown below needs the late parameter to work correctly, as it operates on the vertex positions of the characters. If it was applied before the wave animation, the flashlight would use the incorrect, initial vertex positions.

More information about how animations work (and how to create your own) can be found in Creating Animations.