How The Martha Graham Dancing Google Logo is Animated (Short Explanation)

Google animated their logo by cleverly positioning a single sprite image, using JavaScript and CSS

Google’s dancing logo was so cool today, I had to write something. Here’s a short explanation of how they did it:

First, start with an sprite image that contains every frame of the animation.

Next, have in mind to create a whole lota <div>s, styled like so…

<div id="hplogo0" style="left: 307px; top: 48px; width: 88px; height: 89px; background: url(logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px 0px transparent;"></div>

<div id="hplogo1" style="left: 307px; top: 48px; width: 89px; height: 89px; background: url(logos/2011/graham11-hp-sprite.png) no-repeat scroll -88px 0px transparent;"></div>

<div id="hplogo2" style="left: 307px; top: 48px; width: 91px; height: 89px; background: url(logos/2011/graham11-hp-sprite.png) no-repeat scroll -177px 0px transparent;"></div>

//...and so on, and so on

Firebug is a web develper's best friend

The best way to see how these <divs> will tie together is to use a tool like Firebug or the Webkit Inspector to inspect the Google logo after the animation is complete. Since the logo will only be for a single day, I’ve included a screen capture.

Lastly, tie it all together with some clever JavaScript that will build and append each of the above <div>s over time, to create animated motion.

Google doesn’t appear to have a linked library to accomplish this. Instead they have the following script tag located on the page today:

<script type="text/javascript">(function(){try{if(!google.doodle)google.doodle={};var d=[[307,48,88,89],[307,48,89,89],[307,48,91,89],[305,49,93,89],[305,50,93,88],[305,50,93,88],[306,52,92,86],[305,53,93,84],[305,54,94,83],[306,54,93,83],[307,54,92,83],[307,54,92,83],[308,54,90,83],[308,54,90,83],[306,53,91,84],[306,53,91,84],[308,53,90,84],[308,53,90,84],[305,53,92,84],[305,52,92,85],[306,52,91,85],[308,51,88,87,1],[308,50,88,88],[308,49,88,88],[307,49,89,88],[307,50,89,87],[308,51,89,86],[307,54,90,83],[307,57,90,80],[306,58,92,79],[306,58,92,79],[305,60,92,77],[302,61,95,76],[302,63,95,74],[302,51,96,86],[302,66,98,71],[304,67,96,69],[301,63,96,74],[301,58,93,79],[291,52,94,85],[288,50,71,88],[285,43,76,95],[285,37,70,101],[281,29,55,109],[278,20,58,119],[278,20,55,119,1],[277,12,121,127],[271,2,122,138],[267,1,126,139],[264,0,136,140],[260,0,141,140],[255,0,148,140],[252,0,151,140],[249,2,121,138],[247,3,123,137],[246,3,123,137],[246,2,124,137],[258,2,112,137],[263,2,106,137],[263,2,106,137],[262,2,103,137],[260,2,104,136],[260,2,104,137,1],[268,2,98,137],[267,2,99,137],[266,2,97,137],[266,3,96,136],[264,3,99,136],[263,3,100,136],[261,3,100,136],[259,2,138,137],[254,2,126,137],[247,2,101,136],[240,2,108,136],[238,1,110,137],[230,1,118,138],[220,15,128,124],[211,18,137,121],[205,43,102,96],[202,45,104,93],[200,38,97,101],[198,38,104,101,1],[197,39,107,100],[197,39,112,100],[213,39,94,110],[212,40,95,111],[211,41,97,111],[209,42,99,112],[209,43,98,112],[213,43,87,112],[213,42,83,113],[211,40,86,109],[211,38,86,103],[211,37,88,112],[211,20,186,131],[213,27,167,122],[212,44,87,105],[210,44,88,98],[195,44,106,98],[189,44,110,98],[182,46,117,99],[173,44,118,96,1],[161,43,130,99],[154,42,137,97],[153,42,137,97],[153,42,137,97],[152,41,137,98],[151,41,137,97],[149,41,145,97],[148,25,144,114],[148,13,144,126],[141,12,153,127],[115,11,173,128],[108,7,180,133],[108,4,180,136],[108,3,176,137,1],[108,1,161,139],[105,1,235,138],[103,1,295,148],[103,0,277,149],[108,0,234,137],[101,0,232,137],[99,0,135,139],[95,0,244,139],[81,0,152,139],[69,0,164,139,1],[66,0,169,139],[65,0,170,139],[63,0,168,138],[61,0,159,138],[35,0,304,139],[19,0,189,140],[18,11,138,129],[18,11,137,129],[18,11,137,128],[18,6,135,133],[7,4,146,136],[6,4,147,136],[3,4,150,136,1],[3,5,150,135],[3,8,150,132],[4,6,394,145],[12,6,388,145],[11,8,389,144],[11,8,387,144],[11,8,387,143,1],[10,8,113,131],[11,8,111,131],[10,9,112,130],[12,9,116,130],[12,9,111,130],[12,9,111,130],[12,9,110,131],[12,34,113,106],[13,35,110,104]],e=d.length,f,g,h,i,j=-1,k=function(){google.nav&&google.nav.go?google.nav.go("/search?q=Martha+Graham&ct=graham11-hp&oi=ddle"):window.location.href="/search?q=Martha+Graham&ct=graham11-hp&oi=ddle"},l=function(){var a=d[f],c=document.getElementById("hplogo");if(c&&a[0]){var b=document.createElement("div");b.id="hplogo"+f;b.style.left=a[0]+"px";b.style.top=a[1]+"px";b.style.width=a[2]+"px";b.style.height=a[3]+"px";b.style.background="url(logos/2011/graham11-hp-sprite.png) no-repeat "+-g+"px "+-h+"px";b.onmousedown=k;a[3]>i&&(i=a[3]);a[4]?(g=0,h+=i,i=0):g+=a[2];c.appendChild(b);++f;f< e&&(j=window.setTimeout(l,83))}},m=function(){google.doodle.a=!1;i=h=g=f=0;j!=-1&&(window.clearTimeout(j),j=-1);for(var a=0;a< e;++a){var c=document.getElementById("hplogo"+a);c&&c.parentNode&&c.parentNode.removeChild(c)}j=window.setTimeout(l,83)};if(!google.doodle.a){google.doodle.a=!0;var n=document.createElement("img");n.addEventListener?n.addEventListener("load",m,!1):n.attachEvent("onload",m);n.src="logos/2011/graham11-hp-sprite.png"}}catch(o){google.ml(o,!1,{cause:"DOODLE"})};})();
</script>


The JavaScript takes the looong array of coordinates, assigned as d, and “paints” a <div> the width, height, and position needed every 83 milliseconds, or at about 12 FPS.

The brilliance of the animation is that every frame is exactly the height and width that it needs to be to appear as an animated frame. By simply adding the cumulated width and height of all previous frames, the PNG is positioned exactly where it needs to be to show the next frame… adjusted with a clever for loop for “line breaks” in the sprite PNG.

I know this isn’t exactly a tutorial. My apologies to anyone who was looking for copy-and-pasteable code. Hopefully, this at least satisfies someone’s curiosity.  And if you need to buy dance wear, our store All Around Dance can help with that too.