[Idea] AnimatedTextBlock

[Illustar0]

I have noticed that there currently does not seem to be a simple, built-in way to animate a TextBlock when its text changes — for example, to provide an eased transition between the old and new text.

I think this could be a useful control for the Windows Community Toolkit, and I would be interested in working on it.

My current idea is to provide an AnimatedTextBlock control that allows users to define custom exit and enter animations directly in XAML. The control implementation would then be responsible for playing the exit animation for the old text, updating the displayed text, and playing the enter animation for the new text.

A possible API shape could look like this:

<controls:AnimatedTextBlock
    Text="{x:Bind ViewModel.Value, Mode=OneWay}">

    <controls:AnimatedTextBlock.ExitAnimation>
        <animations:AnimationSet>
            <animations:OpacityAnimation
                Duration="0:0:0.18"
                EasingMode="EaseIn"
                EasingType="Cubic"
                From="1"
                To="0" />

            <animations:ScaleAnimation
                Duration="0:0:0.18"
                EasingMode="EaseIn"
                EasingType="Cubic"
                From="1"
                To="0.96" />
        </animations:AnimationSet>
    </controls:AnimatedTextBlock.ExitAnimation>

    <controls:AnimatedTextBlock.EnterAnimation>
        <animations:AnimationSet>
            <animations:OpacityAnimation
                Duration="0:0:0.22"
                EasingMode="EaseOut"
                EasingType="Cubic"
                From="0"
                To="1" />

            <animations:ScaleAnimation
                Duration="0:0:0.22"
                EasingMode="EaseOut"
                EasingType="Cubic"
                From="1.04"
                To="1" />
        </animations:AnimationSet>
    </controls:AnimatedTextBlock.EnterAnimation>

</controls:AnimatedTextBlock>

The expected result would be something like this:

2026-05-27.23-05-04.online-video-cutter.com.mp4

This would allow users to customize the transition behavior without having to manually duplicate TextBlocks, write Storyboards, or manage the old and new text states themselves.

[Avid29]

There's been proposals of adding functionality like this to the Marquee control. Both would operate on the same principle of providing a wrapper to manage the transition between two UIElements, and as a matter of fact it once had that functionality in some proposed change.

Creating a highly extensible and dynamic control of this sort is not trivial though

[Avid29]

See #543

[Illustar0]

Thanks for the pointer.

I agree that a fully extensible, dynamic transition control for arbitrary UIElements would not be trivial. My current proposal is intentionally much narrower in scope: it is focused only on easing TextBlock text changes, rather than trying to provide a general-purpose element transition host.

In fact, the API sketch and the video above are from a prototype AnimatedTextBlock I have already implemented. The prototype works for the common case I had in mind: when the Text changes, it plays the exit animation for the current text, updates the displayed text, and then plays the enter animation for the new text.

Of course, this approach has limitations. It is still essentially a TextBlock, so it is not meant to support complex layout transitions or highly customized rendering scenarios. I have also looked at DevWinUI’s AnimatedTextBlock, which uses Win2D and is much more advanced visually, but that also comes with significantly more complexity.

So my thinking is that this Toolkit control could stay simple and cover the common “animate text change” scenario, while avoiding the complexity of a fully generic transition framework.

If this direction sounds reasonable, I would be happy to clean up the prototype and open a draft PR or share the implementation for further discussion.