Create custom page transitions with Windows Creators Update

Have you ever wonder what would happen if things suddenly show up and disappear in front of you, you will be surprised right? Similarly Apps consist of so many objects/Controls and pages, if they did the same thing i.e. appear and disappear suddenly then users will be surprised and it will be an awful experience. Apps consist of different pages to create an IA (Information Architecture) that helps users to easily understand different aspects of the app and consume content. Transitioning from one page to another is an experience which in inevitable and is experienced by all users. Page transitions are one of the most critical animation as it helps users to orient themselves and understand new page which is coming into view and what to expect, providing a great user experience and making it seamless will make users feel in control and be in love with your application. Not having any sort of transition leaves users with a bad taste as change is very sudden, not cohesive, jarring and does not provide any help to me as a user to understand what’s next.

As a UWP developer before Creators update could you could only use XAML theme transitions to achieve some page transition. The drawback of theme transitions is that developers cannot customize them to their needs to create their own app personality. There are also apps which don’t use any transition animations and users see a hard cut between pages which is jarring and very sudden.

Transitions

A transition is made up of two main components

  1. From – The state the user is transitioning from. It could be a page or state or value.
  2. To – The state the user is transitioning to. It could be a page or state or value.

Let’s look at a sample which shows some great page transitions and try and break it down

If you look the video closely you will notice few things

  1. There is a fade out animation which happens on the source page as user navigates away from it by clicking an item
  2. There is a connected Animation which helps Item 4 animate across pages – this is not covered in this post
  3. On the destination page there is a dark grey box that is animating down from top to its position
  4. On the destination page there is a light grey box that is animating from bottom to its position

Animating element as they Show

Elements appear on the screen due to multiple reasons, navigation loads a new page, objects appear on the page due to data binding or user added something to the page. In the video above user navigates to a new page to view more details about an item. If you don’t do anything in your UWP app elements will pop on the screen as they are added to the visual tree. It is not a very pleasant experience for the user as objects might appear in random order, asynchronous operations make this problem even worst.

To solve this problem Windows Creators Update has added a new API to the Implicit Animations named SetImplicitShowAnimation(…). This API lives on Windows.UI.XAML.Hosting.ElementCompositionPreview Class.

ElementCompositionPreview.SetImplicitShowAnimation(UIElement element, ICompositionAnimationBase animation);
 

//Sample usage to animate top border to its position as it shows on the screen
// Add a translation animation that will play when this element is shown
 var topBorderOffsetAnimation = _compositor.CreateScalarKeyFrameAnimation();
 topBorderOffsetAnimation.Duration = TimeSpan.FromSeconds(0.45);
 topBorderOffsetAnimation.Target = "Translation.Y";
 topBorderOffsetAnimation.InsertKeyFrame(0, -450.0f);
 topBorderOffsetAnimation.InsertKeyFrame(1, 0);
 ElementCompositionPreview.SetIsTranslationEnabled(TopBorder, true);
 ElementCompositionPreview.SetImplicitShowAnimation(TopBorder, topBorderOffsetAnimation);
 

Let’s talk about the code a bit.

This animation will automatically play on the TopBorder when it appears on the screen. Animation should be associated with UIElement before it is loaded. Animation provided as part of SetImplicitShowAnimation will only trigger at the time when Visuals enter the tree. Associate these animations on page’s constructor or when the object is created but has not yet loaded. If you associate these animations in Loaded Event then the animation will NOT play as the element is already in the tree and framework will not trigger this animation as it has passed the Show stage.

Visibility.Visible is another UIElement property which acts like a trigger to play any show animations associated with the UIElement.

Using Implicit Show animations can help you to create beautiful page transitions and animate elements into view gracefully without popping and flashing. You can also associate Show animation on the Page element itself to create FadeIn type of transitions.

Translation: If you have used Composition or the Visual layer before then you will notice this new property named Translation to help with offset stomping issue. App developers should use Translation to move their Visuals as Framework uses Offset for Layout. More on this topic in a coming post.

Animating elements as they hide

As Frame navigates to a new page users experience a sudden disappearance of objects and the page they are navigating from or in a general case when users delete some object from a page they just suddenly poof/disappear from the page rather than gracefully hiding using animations. In the video above user is navigating from source page to view details of a specific item. It has been very tough for developers to animate objects as they hide as once the object is removed it gets removed from the visual tree without giving any chance and opportunity to run any animation.

To solve this problem Creators Update added a new API to the Implicit Animation named SetImplicitHideAnimation(…), this API again lives on Windows.UI.XAML.Hosting.ElementCompositionPreview.

ElementCompositionPreview.SetImplicitHideAnimation(UIElement element, ICompositionAnimationBase animation);

//This API is very similar to Show animations above. Let's look at an example usage based on our Sample.
// Add a translation animation that will play when this element exits the scene
 var mainContentExitAnimation = _compositor.CreateScalarKeyFrameAnimation();
 mainContentExitAnimation.Target = "Translation.Y";
 mainContentExitAnimation.InsertKeyFrame(1, 30);
 mainContentExitAnimation.Duration = TimeSpan.FromSeconds(0.4);
 ElementCompositionPreview.SetIsTranslationEnabled(MainContent, true);
 ElementCompositionPreview.SetImplicitHideAnimation(MainContent, mainContentExitAnimation);

This code snippet is animating the translation. The animation will start as soon as element is marked to be removed from the tree. Framework does the heavy lifting of understanding that there is an animation associated with the element which is to be removed and hangs on to it till it finishes the animation. From a developers perspective it is removed from the Visual and UIElement collection and will not be returned if you try to enumerate its parent’s children.

Note: Framework retains the complete sub-tree/children of the element which is playing its animation as part of hiding. Another point worth noting here is that Hide animations are recursive in nature i.e. if you remove an element which has hide animation and contains children which have hide animations then removing the parent will kick off animations on children too. E.g. ListView with has ListItems, both have hide animations associated with them. If you remove the ListView then framework will trigger all the hide animations on all the elements under ListView. Developers do not have to go an individually remove items to play their animations framework does this by itself.

Visibility.Collapse also participates in Hide animations. i.e. if UIElement has a hide animation and the visibility is collapsed then element will collapse using the hide animation.

End to End Page Transition

Page Transitions are tricky but also is a great opportunity to bring a great seamless experience to users and help them better understand your application by setting context, helping them focus on things and areas where they need to pay attention or take action, orienting the users as they see a new page in front of them will increase your apps engagement and satisfaction.

Implicit show and hide animations, makes it easy for you to create these beautiful seamless experiences by just defining animations that you want to play and let the framework and platform do the rest of animating objects as they show and hide on the screen.

Resources

You can look at a running sample from Windows UI Sample Gallery – Navigation Flow It also has some connected animations which is posted here.

Complete Sample Gallery – Windows UI Samples

Thanks!