 <p>Their javascript seems to be changing the CSS. The CSS does the transformation and fading work.</p> <p>I <a href="http://mitchell-me.com/QuickOptimizer/Cache/43b42ff4cc2c854d0f53e3a3eef13bd85f3aff56b295be5a866e5835449041e2.js" rel="nofollow">snooped through their javascript</a>...</p> <pre><code>$("#service li").click(function(e){e.preventDefault();var index=$(this).index();$('#service li').removeClass("active");if(!$(this).hasClass("active")&amp;&amp;!intrans){intrans=true;switch(index){case 0:TweenLite.to($(".dial"),1.5,{css:{shortRotation:0},ease:Expo.easeInOut});TweenLite.to($(".gear"),1.5,{css:{autoAlpha:0,rotation:0},ease:Expo.easeInOut});TweenLite.to($(".bulb"),1.5,{css:{autoAlpha:1,rotation:0},ease:Expo.easeInOut});$('#electric, #electric1').delay(800).animate({opacity:1},{easing:easeType,duration:"100",complete:function(){}});$('#mechanic, #mechanic1').delay(200).animate({opacity:0},{easing:easeType,duration:"100",complete:function(){intrans=false}});break;case 1:TweenLite.to($(".dial"),1.5,{css:{shortRotation:115,transformOrigin:"103px 103px"},ease:Expo.easeInOut});TweenLite.to($(".bulb"),1.5,{css:{autoAlpha:0,x:0,y:0,rotation:120,transformOrigin:"20px 40px"},ease:Expo.easeInOut});TweenLite.to($(".gear"),1.5,{css:{autoAlpha:1,x:0,y:0,rotation:120,transformOrigin:"50px 48px"},ease:Expo.easeInOut});$('#electric, #electric1').delay(200).animate({opacity:0},{easing:easeType,duration:"100",complete:function(){}});$('#mechanic, #mechanic1').delay(800).animate({opacity:1},{easing:easeType,duration:"100",complete:function(){intrans=false}});break;}} </code></pre> <p>And it looks like they're using <a href="http://www.greensock.com/tweenlite/" rel="nofollow">Tweenlite</a> and <a href="http://www.greensock.com/tweenmax/" rel="nofollow">Tweenmax</a> for it.</p>