Next, it’s time to create our first animation in Blend to transition the rear grid into view. We’re going to be transforming both via a plane projection transform in the x-axis so they appear to flip: the rear grid will go from -180 to 0 and the front grid from 0 to 180.

Doing this using blend is just a case of adding two keyframes to a storyboard with these two values for each grid. However, doing this will still mean that the grids have the same position in the field of view and the tile won’t have switched. Therefore, half way through the animation, when the grids are at +/-90 degress to the viewer, you need to make the front grid invisible. It wouldn’t be visible from this point onwards anyway and it brings the rear grid into view when it continues to animate to 0.

Because the XAML grids are 2D objects the point at which we switch them, and when they are both perpendicular to the viewer, means the screen is blank and the change is not noticeable.

The mid point of the animation where we swap which grid is visible is momentarily blank. Don’t fret — it’’s not visible.

The XAML for this FlipIn animation is as follows. (Note: I’ve added some other keyframes so that the animation starts with the rear grid’s visibility set to invisible — it’s not displayed so there’s not much point it being rendered until the midpoint).

In order to keep the animation animating in a circular motion you’ll need to add a separate animation to do the exact same but this time the grids will have swapped position.