# Anniversary SDK: Implicit Animations

> I think the implicit animations are one of the most interesting features of the birthday update. What about Quesako? This allows you to set up transition…

- Author: Jérôme Giacomini
- Language: en
- Canonical URL: [Anniversary SDK: Implicit Animations](https://jeromegiacomini.net/articles/2016/12/27/anniversary-sdk-implicit-animations)
- Published: 2016-12-27
- Last modified: 2026-09-05
- Topics: .NET, C#, Windows

I think the implicit animations are one of the most interesting features of the birthday update.

### What about Quesako?

This allows you to set up transition animations when changing the value of a property **Visual**.

### A little bit of history

There are two types of animations in the composition framework. **KeyFrameAnimation** and the **ExpressionAnimation**. Both types of animation inherit an abstract class **CompositionAnimation**

L’**Implicit animation** It is not an animation as such, so it does not inherit **CompositionAnimation** This one, however, uses collections of **Composition Animation**. When an animation is added to this collection, the trigger is specified.

![](https://jeromegiacomini.net/Blog/wp-content/uploads/2016/12/implicitAnimation.png)

### How does that work?

The first step is to create an implicit animation.

```csharp

_compositor.CreateImplicitAnimationCollection();

```


Once the animation is created, it is necessary to define which property is monitored.

If this property of the visual changes, the associated animation will be played **automatically**.

```csharp

 // Ajout d’une CompositionAnimation sur le Offset
implicitAnimationCollection["Offset"] = …;

```


And finally, on every visual to which you want to add the implicit animation, you have to set the instance of this.

```csharp

// Ajout de l'animation sur le visuel
visual.ImplicitAnimations = implicitAnimationCollection;

```


When this property is changed, the implied animation will be played automatically.

**C’is almost magical!!!!**

### And with an example, what do you get?

In this example, we're going to edit a GridView so that when the position of one of its items changes the item is animated.

#### Creating the grid:

```xml

<GridView x:Name="ItemsGridView"/>

```


#### Creation of implied animation:

```csharp

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_elementImplicitAnimation = _compositor.CreateImplicitAnimationCollection(); 
_elementImplicitAnimation["Offset"] = CreateOffsetAnimation();

```


#### Creation of the animation to be played at triggering:

```csharp

private CompositionAnimationGroup CreateOffsetAnimation()
{
            Vector3KeyFrameAnimation offsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
            offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
            offsetAnimation.Duration = TimeSpan.FromSeconds(.4);

            offsetAnimation.Target = "Offset";

            ScalarKeyFrameAnimation rotationAnimation = _compositor.CreateScalarKeyFrameAnimation();
            rotationAnimation.InsertKeyFrame(.5f, 0.160f);
            rotationAnimation.InsertKeyFrame(1f, 0f);
            rotationAnimation.Duration = TimeSpan.FromSeconds(.4);

            rotationAnimation.Target = "RotationAngle";

            CompositionAnimationGroup animationGroup = _compositor.CreateAnimationGroup();
            animationGroup.Add(offsetAnimation);
            animationGroup.Add(rotationAnimation);

            return animationGroup;
}

```


#### Adding or removing implied animation to the visual of each container of a line:

```csharp

foreach (var item in ItemsGridView.Items)
{
     var container = ItemsGridView.ContainerFromItem(item) as GridViewItem;
     var elementVisual = ElementCompositionPreview.GetElementVisual(container);

     if (enableImplicitAnimation.IsChecked.GetValueOrDefault())
     {
            elementVisual.ImplicitAnimations = _elementImplicitAnimation;
     }
     else
     {   
            elementVisual.ImplicitAnimations = null;
     }
}

```


#### For each container change in the grid view, the following animation is added to the visual:

```csharp

ItemsGridView.ContainerContentChanging += ContainerContentChanging;

...

private void gridView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
     var elementVisual = ElementCompositionPreview.GetElementVisual(args.ItemContainer);
     if (args.InRecycleQueue)
     {
             elementVisual.ImplicitAnimations = null;
     }
     else
     {
            if (enableImplicitAnimation.IsChecked.GetValueOrDefault())
            {
                    elementVisual.ImplicitAnimations = _elementImplicitAnimation;
            }
      }
}

```


![](https://jeromegiacomini.net/Blog/wp-content/uploads/2016/12/ImplicitAnimation.gif)

### To go further:

[Link to the MSDN document](https://msdn.microsoft.com/fr-fr/windows/uwp/graphics/composition-animation)

[Link to the demo code](https://github.com/jonathanantoine/UWP-Anniversary-Quoi-de-neuf)

Happy coding 🙂