Silverlight Tip – Reverse your animation

Let’s say you are trying to animate a “zoom-in” e.g. zoom to a part of an image.  Once the user is done zooming in, he will probably want to zoom back out, you want to animate the zoom-out but in reverse.  It turns out to be very easy to do with Expression Blend.

Step 1

Add an image to your page and resize it to a thumbnail size on the top left corner.


Step 2

Create a new story board called “GrowPic” that will resize the picture to fill the canvas in 0.5 seconds.  Here is a breakdown of the steps

  1. Add a story board


  2. Give it a name


  3. Click the 0.5 second marker in the timeline (a vertical yellow line will show up)


  4. Resize the image by dragging the bottom right hand corner.
  5. Hit the play button and you will see your picture grow in 0.5 seconds

Step 3

Create the reverse storyboard like this:

  1. Click the drop-down next to the Storyboard name and select Duplicate
  2. This creates a new storyboard named “GrowPic_Copy1
  3. So click the drop-down again and click Rename and type “ShrinkPic”
  4. To reverse it, click the drop-down again and click Reverse

Make sure you don’t reverse it twice or you will end up with the original.

Step 4

Write some code to handle the click event when the image is small and start the GrowPic storyboard and another to handle when the image is large and start the ShrinkPic storyboard.

Live Demo

See it at