UWP Visual offset animation not working

Question

For my app I want to be able to use the Composition API to animate the Offset of an UIElement This element is predefined in Xaml and I have found that the Visual layer of these controls only get calculated AFTER an animation has been triggered...

This behavior results in the animation only showing when it has been called a second time

My Xaml

<StackPanel x:Name="ActionButtonsPanel" Margin="50,175,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Button x:Name="CreateNewButton" Tag="&#xE160;" Content="Create New..." Style="{StaticResource IconButtonStyle}" Click="CreateNewButton_Click"/>
    <Button x:Name="OpenFileButton" Tag="&#xE838;" Content="Open File..." Style="{StaticResource IconButtonStyle}" Margin="0,10,0,0" Click="OpenFileButton_Click"/>
</StackPanel>

My Code

private void ShowNextButtons(UIElement Item1, UIElement Item2) {
    var _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

    var visual1 = ElementCompositionPreview.GetElementVisual(Item1);
    visual1.CenterPoint = new Vector3(0, (float) Item1.RenderSize.Height / 2F, 0);

    var animationGroup1 = _compositor.CreateAnimationGroup();

    var offset1 = visual1.Offset; //First Time: Offset = <0,0,0>

    var fadeOut = _compositor.CreateScalarKeyFrameAnimation();
    fadeOut.Target = "Opacity";
    fadeOut.Duration = TimeSpan.FromMilliseconds(1000);
    fadeOut.InsertKeyFrame(0, 1);
    fadeOut.InsertKeyFrame(1, 0);
    //animationGroup1.Add(fadeOut); Not included: To be able to click a second time

    var slideOut = _compositor.CreateScalarKeyFrameAnimation();
    slideOut.Target = "Offset.X";
    slideOut.Duration = TimeSpan.FromMilliseconds(1000);
    slideOut.InsertKeyFrame(0, offset1.X);
    slideOut.InsertKeyFrame(1, offset1.X - 20F);
    animationGroup1.Add(slideOut);

    visual1.StartAnimationGroup(animationGroup1);
}

The Offset.X animation is only visible the second time the method has been called

Answer 1

You are most likely hitting the an issue with Composition & XAML position properties conflicting with each other. http://blog.robmikh.com/uwp/xaml/composition/2016/07/16/changes-to-xaml-composition-interop.html

Your simplest solution is to wrap whatever you're animating inside Borders and apply any layout properties to those borders (like Margins), and then your offset animations should now work on what you're animating (as the XAML layout engine should now have no reason to overwrite the Composition Offset property on the animation target with the relative XAML position)

Alternatively, if you're targeting the Creators Update you can animate the Composition Translation property instead. See: http://varunshandilya.com/offset-animation-gets-stomped-here-is-how-to-solve-it-in-uwp-creators-update/