Shader Graph Animations

In Unity 6.3 and later, it's possible to use Shader Graphs in UI toolkit. This page describes how you can use this feature with Text Animations for UI Toolkit.

Import the utilities and sample package

Import the Shader Animation Utilities & Sample for Unity 6.3 and later Unity package into your project. It's in the StixGames/TextAnimationsForUIToolkit folder.

This package contains an example scene and a few utility sub-graphs that can be used to create your own effects.

How to use animations

Create a UI shader graph following Unity's documentation, create a material, and add the material to the Animated Visual Element, as you would with any other Visual Element. That's already everything you need to get started. You can use the time node or the special shader properties for animations. Everything else is up to your imagination!

Changing material properties with tags

Use the <shader> tag to change material properties for parts of your text. For example, if you set the strength of your effect to 0, you can enable it only for specific parts of the text.

The shader tag can currently be used to set the following kinds of value:

Value Type	Example
Float	<shader property="_FloatProperty" value="0.1">Animated text</shader>
Color	<shader property="_ColorProperty" value=#FF0000>Animated text</shader>

Special shader properties

Don't forget to check out the utility sub-graphs in the included Shader Animation Utilities package. They can help you with setting up appearance and vanishing animations quickly. Also check out the sample scene to see this feature in action.

The text renderer sets the following shader variables. Add them to your shader graph blackboard, or use the helper sub-graphs to access them.

Property Name
_AnimationTime	The current internal animation time of the Animated Visual Element. You can also use the Time node if you don't need your shader to use the exact same time as the text.
_AppearanceTime	The time when the current letter starts to appear.
_VanishingTime	The time when the current letter has fully disappeared.

Technical details

The animation renderer creates a copy of your material for every single letter. This makes it possible to change material properties dynamically as needed. If you need to make changes on the fly, you could create a new material with the updated settings.

If that's not performant enough for your use case or you have any other questions or problems, please contact me via the contact form, or join my Discord. Of course, you're also welcome to show off your creations or start discussions!