How to reveal text using a wipe in UIToolkit?

[achimmihca]

I have a karaoke game and would like to have a rolling color wipe for the current lyrics.

At the moment, I create a label element for every syllable.
This works ok, but it could be improved with a smooth wipe of colored text on pixel level instead of syllable level.

One solution could be to use masking, but this is not yet available in UIToolkit.
Are there other ways how this could be achieved?

Example of the goal:

Note that the same question has been asked and solved for UGUI , but I am looking for a UIToolkit solution.

[achimmihca]

One solution could be to use masking

Yes, UI Toolkit can already do masking via a parent element with “overflow: hidden”

The hierarchy could be “labelContainer > labelElement”, where labelContainer has “overflow: hidden”.

[oscarAbraham]

You could put each row of text inside a plain Visual Element. Then you set that Visual Element’s overflow property to hidden. Finally, you animate the Visual Element’s width to reveal the text it contains.

[magnetic_scho]

How about having one label with the entire text and use rich text tags to set the alpha?
Of course, you could then only fade character by character, but it would spare you the hassle of having so many labels.

[mikejm]

@magnetic_scho

How about having one label with the entire text and use rich text tags to set the alpha?
Of course, you could then only fade character by character, but it would spare you the hassle of having so many labels.

Wow that’s pretty creative for a letter by letter fade effect. I never thought of that. I didn’t know it supported that.

https://docs.unity.cn/Components/UIE-supported-tags.html

I would have just suggested using a overflow hidden visual element as well as the parent with the label set to position.absolute and then adjusting the overflow hidden parent dimensions/position/translation.