25 comments

[ 2.8 ms ] story [ 52.8 ms ] thread
Select the logo as it animates to see more clearly how it's a bunch of divs being spawned. (To select it, either use your mouse or tab out of the search box and hit Ctrl-A)

link: www.google.com

The logo didn't work in Opera 11.10 :/ I had to fire up IE 9 to take a peek
I can't see any doodle on Google homepage, don't know why it's not available to my country. Here's a higher resolution video of the doodle by the artist Ryan Woodward himself:

http://www.youtube.com/watch?v=IsbI1GE4DGA

It appears that animating dance figures is his speciality, check also this:

http://www.youtube.com/watch?v=OBk3ynRbtsw

It has been taken down. Their doodles last only 24 hours.

For future reference, if you think that a Google doodle is not available in your country, you can try www.google.com/ncr

I can't access the article but looking at the homepage, I'm surprised it's not just a giant spritesheet that changes the x/y offset on certain intervals.

Nevermind, it is a giant spritesheet, but it's optimised to allow for static elements to not have to be redrawn. http://www.google.com/logos/2011/graham11-hp-sprite.png

Yes, but isn't Google supposed to be able to come up with an elegant equation to represent those coordinates so it's not just this huge ugly pile of crap? I popped the code open on it this morning and yawned. You know a company's starting to get love handles when they have people who spend a week doing stuff like this that runs for a day, mildly annoys a bunch of people, and is immediately replaced.
You do understand that people are literally going to google to watch this animation, play pac-man and whatever else cool that happens on the frontpage? Made it to Hacker News frontpage and people are talking about Google's homepage. Job well done.
Lighten up. People go to google regardless. And people talk about it because it's the first thing everyone sees when they get to work in the morning. All I'm saying is it's not really much of an accomplishment. An animated gif would have been the same size file, for example -- no giant array necessary. I'm just saying it's ironic that a company that's supposed to exemplify elegant systems would end up writing single-use code that basically boils down to a large ANSI graphic you'd see on the front of a WWIV BBS.

Hugh Hefner's birthday is April 9th. Where was his banner?

I wonder why they went with many <div>'s, instead of a single <div> with JS controlling the background-position and clip?
There's pausing and overlap in the animation
With many small divs they only need to redraw the part that changes. The sprite can also be smaller because every frame doesn't have to be the full size of the logo.
To get an animated feel for how this works, add a user CSS to outline the border. I use the "User CSS" extension for Safari

http://code.grid.in.th/

Then add this CSS:

#hplogo div { border: 1px red solid; }

Let me guess : by taking up 100% CPU? Irritated me the whole day.
Ain't really brilliant. And they used the same 'doodle' method before. What would be nice is if they used the HTML5/canvas methods they've been hyping so hard. Unfortunately, animating this with that would take at least a QC Xeon.

What would be really, really awesome would be if they did it with Flash. Then it would work on droid, and iOS users would all go 'wtf?'

Yeah I wish they would use canvas for browsers that support it, and fall back to the million-div method
Bunsen was done with canvas:

http://www.google.com/logos/bunsen.html

It probably wouldn't have worked here, at least not without the gorgeous artwork that makes the doodle famous. It was already a huge PITA to get all the control points into Bunsen, and that was a mostly static animation with pretty much simple polygons in motion. Martha Graham has fluid motion and semi-realistic human figures; this is far too complex to draw with just code.

I use igoogle start page, and I can't see any animation, just a static Martha Graham Google Logo. Does anyone have a the correct google URL in the States? I've seen the video of it, but it annoying me that I can't see the actual animation.

*edit: I found it http://www.google.ca/

Try using an private/incognito window/tab
if you don't want to log out, just open up chrome in porn-mode (incognito) and go to google.com

or just use any other browser your'e not logged in to. or just log out.

I guess since google.com/ig stores a cookies on my browser, all of them actually, I couldn't get the normal google search page, even with logging out. Thanks for the private mode tip.
The animation was cool the first time, then after that it just got annoying - like having a flash ad on the page. I changed my search to Bing for the first time ever because of this animation.