Google’s Mothers day doodle done with javascript css sprite animation similar to Martha Graham’s

Belated/Advanced Happy Mothers Day!

Google starts the Mothers day celebration with an affectionate greeting doodle.

An animated doodle, that starts playing on opening the homepage. Its done with a sprite image and a javascript animating frame by frame by positioning a portion of the sprite image(frame) by changing the position with CSS just like the way Martha graham’s doodle was done.

:The sprite image used is,

Click image to view full size (960px x 839px)

Many would wonder can this animation be done with just CSS. I tried this for couple of hours and gave up for now. It’s so clear after taking a closer look at the sprite image, the css only moves frame after frame taking different top position, width and height. So far CSS keyframes animation works so well for a sprite image with every frames being the same height and width. I figured out that the only way to get this doodle done with only CSS would be to modify the sprite image itself (all the frames having full details and of same height and width). Unless there is a way to animate like stacking the frames one over another like the doodle javascript does with divs, I better move on. :)

Let’s take a look at the doodle code,


The html code, a div tag that holds the image as its background is just a div before the animation begins.


Then for every frame a div tag is created with background sprite image positioned to show that frame’s top, left, width and height details. It takes 68 frames that’s 68 new div element within the main div to animate! The Javascript:

The code executes by checking for existing div elements that are created from the previous execution and deletes them all. This is handy when you save the html code directly from the Firebug and then open it.

Once its done deleting the child div elements of the main div, it calls the function that creates new child div element and does all the sprite image frame positioning and background styling. Frame’s left, top, width and height are stored in an array g of 143 items. A Boolean value of 1, is added to the array for some items, to change the required background image positioning. 75 empty elements of the array are just to create a slowness in the animation, to add extra 42ms delay when needed. Deleting them all speeds up the animation.


What is left to wonder is how Google produces these kind of doodle? A full frame sprite image with all the frames with full details and all identical, should have been compressed! Along with that the array that is generated. The exact background frame positioning animation have been expressed, which is then coded. Along with other factors such as erasing the previously added child div if present in the HTML. Then of course compressing all the code. Is that it?

Leave a Reply

Your email address will not be published. Required fields are marked *