On this page

Scale Animations

Here are some examples of how to create scale animations in WinUI using the Windows.UI.Composition namespace.

Learn more

Button

You can create a scale animation for a button using the SpringVector3NaturalMotionAnimation class from the Windows.UI.Composition namespace. This allows you to create a spring-like effect when the button is hovered over.

 <Button HorizontalAlignment="Center" VerticalAlignment="Top"
      PointerEntered="ButtonLogin_PointerEntered"
      PointerExited="ButtonLogin_PointerExited" />

 private readonly Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();
 private SpringVector3NaturalMotionAnimation springAnimation;

 private void CreateOrUpdateSpringAnimation(float finalValue)
 {
      if (springAnimation == null)
      {
           springAnimation = compositor.CreateSpringVector3Animation();
           springAnimation.Target = "Scale";
      }

      springAnimation.FinalValue = new Vector3(finalValue);
 }

 private void ButtonLogin_PointerEntered(object sender, PointerRoutedEventArgs e)
 {
      // Scale up to 1.5
      CreateOrUpdateSpringAnimation(1.1f);
      (sender as UIElement).CenterPoint = new Vector3((float)((sender as Button).ActualWidth / 2.0), (float)((sender as Button).ActualHeight / 2.0), 1f);
      ((UIElement)sender).StartAnimation(springAnimation);
 }

 private void ButtonLogin_PointerExited(object sender, PointerRoutedEventArgs e)
 {
      // Scale back down to 1.0
      CreateOrUpdateSpringAnimation(1.0f);
      (sender as UIElement).CenterPoint = new Vector3((float)((sender as Button).ActualWidth / 2.0), (float)((sender as Button).ActualHeight / 2.0), 1f);
      ((UIElement)sender).StartAnimation(springAnimation);
 }

Reuse the animation

Extract the animation creation logic into a helper so multiple controls can share it:

public sealed class ScaleAnimationService
{
     private readonly Compositor compositor;

     public ScaleAnimationService(Compositor compositor)
     {
         this.compositor = compositor;
     }

     public SpringVector3NaturalMotionAnimation Create(float finalValue)
     {
         var animation = compositor.CreateSpringVector3Animation();
         animation.Target = "Scale";
         animation.FinalValue = new Vector3(finalValue);
         animation.DampingRatio = 0.6f;
         animation.Period = TimeSpan.FromMilliseconds(250);
         return animation;
     }
}

You can cache instances of the service in your view model or dependency injection container to keep animations consistent across the app.

Tune the spring

Use DampingRatio to control how bouncy the animation feels—a lower value adds more overshoot.
Adjust FinalValue and CenterPoint together when animating items of different sizes to prevent jarring jumps.
Pair the scale effect with subtle opacity or shadow changes for richer affordances, but keep the duration short to maintain responsiveness.