Darcy ClarkeDevelopment / Design / UX

Toggle Main Navigation

Jun 5, 2012

Creative Animation Using CSS clip and rotate

Posted in "development"


When it comes to animations, as a programmer, you get to be a little creative. Just over a year ago I was working on a project where I needed a progress bar to be displayed on load. I wanted to have something like an wheel animation but that slowly filled up. I decided that I didn't want to use canvas and so I started to investigate other avenues. Eventually, I decided that masking/clipping elements in HTML/CSS would be well supported, performant and fun. Using a combination of clip, border-radius and overflow I was able to get the desired effect. Check it out below:

<div class="wrap"><iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/darcyclarke/9uHGS/10/embedded/result,js,html,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe><span>Fork this Fiddle</span></div>

Note: For this snippet I used Zach Johnson's jQuery rotate &amp; scale plugin. I could have gone ahead and used CSS transforms (rotate) instead but this was written over a year ago, so I'm cutting myself some slack. +Plus browser support was an issue at the time of creation ;).