Question: I'm trying to implement a FlipView control in a Win10 UWP app, but I don't seem to be able to animate the transition between the open and closed states like in the Windows 10 calendar app. If I look at the default style of the SplitView, it seems that the panel size is altered by animating the Width property of a ColumnDefinition. This property can not be animated using the default animations provided by the framework. Any help would be appreciated.

Answer: 
In the DefaultStyle, look for the **ClosedCompactLeft** visual state. Then modify the **Duration** for the animation on **PaneClipRectangleTransform**. Look for this animation (which is the one you will modify):

```
 <DoubleAnimation Storyboard.TargetName="PaneClipRectangleTransform"
                                        Storyboard.TargetProperty="TranslateX"
                                        To="{Binding TemplateSettings.NegativeOpenPaneLengthMinusCompactLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                        Duration="0:0:0.0" />

```
You can define a `Storyboard` inside a `VisualState`. If the trigger is fired, the story will begin automatically.

Example structure of code:

```
<VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                     <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Drawer">
                            <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-260">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <CircleEase EasingMode="EaseOut"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1020" />
                    </VisualState.StateTriggers>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Drawer">
                            <EasingDoubleKeyFrame KeyTime="0" Value="-260"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <CircleEase EasingMode="EaseOut"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

```

If you are using SplitView, you can code a class that extends SplitView and custom it's Style , which makes you get the `Pane` and the `Content` in your code and thus you can animate them on your own.