Animate textblock when the value changes

I want to have an animation similar to this one (the score board, when the 2 becomes a 4) : gif example

Using this article : https://michaelscherf.wordpress.com/2009/02/23/how-to-trigger-an-animation-when-textblocks-text-is-changed-during-a-databinding/, I have been able to modify the opacity of my textblock when the text changes.

But I don't see at all how I can make the same translation effect ?

My textblock will also containing only numbers.

You could do something like this with the concept being of just giving the illusion of the ticker. Remove the Framework.Loaded trigger when you've hooked up your data binding. The Red/Green Text is to illustrate the illusion you're going for. Wherein the Green would retain the original value via a one-time, and the Red would be the new value. Also remember to add the NotifyTargetUpdated binding thingy from your example link to your binding base. Of course you'll likely need to tweak some values to get exactly what you're after.

Also don't forget to remove the RepeatBehavior="Forever" from the Storyboard as it's also just there for the sake of the this initial example.

<Grid HorizontalAlignment="Center"  VerticalAlignment="Center" Margin="10" ClipToBounds="True">
        <Grid.Resources>
            <Storyboard x:Key="flipItGood" Duration="0:0:2" RepeatBehavior="Forever">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" 
                                           Storyboard.TargetName="A">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" 
                                           Storyboard.TargetName="B">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="20"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
        <Grid.Triggers>
            <!-- THIS IS HERE ONLY FOR AN IMMEDIATE EXAMPLE
                 DITCH THIS TRIGGER FOR THE TARGET.UPDATED ONE WHEN ACTUALLY USING -->
            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                <BeginStoryboard Storyboard="{StaticResource flipItGood}"/>
            </EventTrigger>
        </Grid.Triggers>

        <TextBlock x:Name="A" 
                   Text="BIND ME" 
                   Foreground="Red" FontSize="18" FontWeight="Bold"
                   RenderTransformOrigin="0.5,0.5">

            <TextBlock.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform Y="-20"/>
                </TransformGroup>
            </TextBlock.RenderTransform>

            <TextBlock.Triggers>

                <EventTrigger RoutedEvent="Binding.TargetUpdated">
                    <BeginStoryboard Storyboard="{StaticResource flipItGood}"/>
                </EventTrigger>

            </TextBlock.Triggers>
        </TextBlock>
        <TextBlock x:Name="B" 
                           Text="BIND ME" FontSize="18" FontWeight="Bold"
                           Foreground="Green" RenderTransformOrigin="0.5,0.5">
            <TextBlock.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </TextBlock.RenderTransform>
        </TextBlock>

    </Grid>

Which results in (sorry for the crappy gif);