If you have played BoarderLands you will understand the demo reference.
Animating clipping paths is a great technique to know, it allows you to show sections of an image without moving the whole image. To create a clipping path, place your image on the canvas, create the shape you want for the clipped area, select both objects and right click > Path > Create clipping path.
Your shape will disappear and you will be left with your image in the shape of that object.
To Animate your clipping path create a new story board, select your image and then grab the Direct Selection tool from your tools panel. You will see a pick boarder appear around the image, this is your path you created earlier. You can now move your timeline along and drag the path around to animate.
I want to now take this a step further and animate a clipping path using perspective.
You cannot directly animate a clipping path using the perspective transforms so we need to get a little bit tricky.
First create the shape you want to clip, then duplicate it, this will be a guide for your clipping path. Animate this guide using the transforms as you usually would to get the effect you want. Now with your clipping path, select the direct selection tool, and keyframe by keyframe, move the points to the exact position of your guide.
Thanks for reading
About the Author
Alex Knight
Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:AGKDesign.twitter | xamling.net
