We can use the projection properties in Silverlight 3 to help produce a 3D spiral animation.

Breakdown of effects

To create this effect I use the following transforms:

• Opacity at either end of the animation.
• Projection values to the X and Z axis to make each element loop to the foreground and background.
• Scale transform to enhance the size of each element at it’s nearest and furthest point.
• Easing on the above Scale transform to help the movement look more natural.
• Translate transform to move the elements from the left to right.

To get the above effect I also carried out these additional effects:

• I replaced the circle elements for images.
• I slowed down the storyboards using the SpeedRatio value, this allows you to speed up or slow down a storyboard without having to go through and reposition all the key frames.
• I added an additional projection transform to the Y axis to give the impression the spiral effect is along a curve.

Grab the source

As usual you can download the source files for both the above examples.

Silverlight spiral effect using 3d projection 1

Silverlight spiral effect using 3d projection 2