Skip to content

motion-in-practice.md

Latest commit

 

History

History
118 lines (94 loc) · 6.36 KB

motion-in-practice.md

File metadata and controls

118 lines (94 loc) · 6.36 KB
title Motion in practice - animation in Windows apps
description Learn how Fluent motion fundamentals like timing, easing, directionality, and gravity come together in your app.
label Motion in practice
template detail.hbs
ms.date 10/29/2025
ms.topic how-to
doc-status Published
ms.localizationpriority medium
ms.custom RS5

Animations in Windows app

Timing, easing, directionality, and gravity work together to form the foundation of Fluent motion. Each has to be considered in the context of the others, and applied appropriately in the context of your app.

Here are 3 ways to apply Fluent motion fundamentals in your app.

  • Implicit animation
    Automatic tween and timing between values in a parameter change to achieve very simple Fluent motion using the standardized values.
  • Built-in animation
    System components, such as common controls and shared motion, are "Fluent by default". Fundamentals have been applied in a manner consistent with their implied usage.
  • Custom animation following guidance recommendations
    There may be times when the system does not yet provide an exact motion solution for your scenario. In those cases, use the baseline fundamental recommendations as a starting point for your experiences.

Transition example

functional animation

:::row::: :::column::: Direction Forward Out:
Fade out: 150ms; Easing: Default Accelerate Direction Forward In:
Slide up 150px: 300ms; Easing: Default Decelerate :::column-end::: :::column::: Direction Backward Out:
Slide down 150px: 150ms; Easing: Default Accelerate Direction Backward In:
Fade in: 300ms; Easing: Default Decelerate :::column-end::: :::row-end:::

Object example

300ms motion

:::row::: :::column::: Direction Expand:
Grow: 300ms; Easing: Standard :::column-end::: :::column::: Direction Contract:
Grow: 150ms; Easing: Default Accelerate :::column-end::: :::row-end:::

Implicit Animations

Implicit animations are a simple way to achieve Fluent motion by automatically interpolating between the old and new values during a parameter change.

[!div class="checklist"]

[!div class="nextstepaction"] Open the WinUI 3 Gallery app and see Implicit Transitions in action

[!INCLUDE winui-3-gallery]

You can implicitly animate changes to the following properties:

Each property that can have changes implicitly animated has a corresponding transition property. To animate the property, you assign a transition type to the corresponding transition property. This table shows the transition properties and the transition type to use for each one.

Animated property Transition property Implicit transition type
UIElement.Opacity OpacityTransition ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation TranslationTransition Vector3Transition
Border.Background BackgroundTransition BrushTransition
ContentPresenter.Background BackgroundTransition BrushTransition
Panel.Background BackgroundTransition BrushTransition

This example shows how to use the Opacity property and transition to make a button fade in when the control is enabled and fade out when it's disabled.

<Button x:Name="SubmitButton"
        Content="Submit"
        Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
    <Button.OpacityTransition>
        <ScalarTransition />
    </Button.OpacityTransition>
</Button>
public double OpaqueIfEnabled(bool IsEnabled)
{
    return IsEnabled ? 1.0 : 0.2;
}

Related articles