Eadweard J. Muybridge 182nd Birthday Google Doodle – How it’s done?

Inspired by Brian’s short explanation of Martha Steward’s dancing Google Doodle, I am writing this post doing my best explaining Eadweard J Muybridge’s Horse in motion doodle.

Johannes Gehrke blogged about this, but in german, the video is in English though. He made a GIF image of the doodle, below, as you can see is an awesome job!

The Story behind the Horse motion picture of Eadweard.

In 1872, Eadweard J. Muybridge was hired by Leland Standford to prove a question scientifically – “Does all 4 of horse’s legs are off the ground during its gallop?”. 5 years later, Eadweard proved it by photographing horse motion(with 12-24 cameras with a shutter speed of 1/500 s) on a single negative as silhouettes to be viewed on zoopraxiscope. A year later after the negative being lost and the need for more explanation, Eadweard photographed horse at a gallop in Stanford’s farm, and this motion videography is “The Horse in motion” which is the inspiration for the Google Doddle honoring him on his 182nd birthday, done with Javascript and CSS.

How it’s done?

You can see the entire doodle’s code with Firebug.

Now to the code,

A Single sprite image of  Eadweard J. Muybridge’s “The Horse in motion” is used.

Next a Div (id=hplogo) containing 2 Divs(id=hplogo-p and id=hplogo-v) within is used.

Now let’s see what each DIV’s contain.

Div hplogo has the horse in motion sprite image(jpg) and is 162px in height and 469px in width. The image is repeated to fill the div. This div acts as a button when you first click on it to run the animation.

Div hplogo-p has the play button image, and its centered.

Div hplogo-v has the transparent png image that looks like google logo, this is a static image.

Now, lets look at the Javascript that powers the animation.

When the play button is pressed, the play image gets pushed to -70px little by little(slowly) so its out of sight. The first DIV’s image background position’s X axis value is on the variable c and its a negative value. The c takes value in small after the play button is pressed, and takes value that sets the background position of the “horse motion” image that progresses from,

and then on and on with this sequence, [0px 0pt
-67px 0pt
-134px 0pt
-201px 0pt
-268px 0pt
-335px 0pt
-402px 0pt
-469px 0pt
-536px 0pt
-603px 0pt
-670px 0pt
-737px 0pt]

As you can see its slowly progressing at the beginning, and increases its speed of the progression and finally settling to a constant progression, changing its X-axis position, scrolling left, fast, giving the effect of moving horse across all the 2 repeated sprites in the first DIV which is the container of the doodle.

Martha Graham’s doodle had to loop over all the sprite and show one at a time, while this one had to just scroll on the X-axis, fast.

Closing…

Eadward’s The Horse in Motion  shows that all of a horse’s hooves actually do leave the ground simultaneously — although not with the legs fully extended forward and back, as contemporary illustrators tended to imagine, but rather at the moment when the horse’s legs and hooves are tucked beneath as it switches from “pulling” with the front legs to “pushing” with the back legs. [source]

Update:

CssDeck.com is currently experimenting doing this doodle animation with just CSS. You can check that out here. Interesting to see the animation working fine with only the CSS, just missing the slow starting up and a subtle rewind effect of the original, but is a good one and the blogger is open to ideas on how to get those starting up effects, with just pure CSS!

Update 2:

The doodle is up on the doodles page. You can check it here.

CssDeck.com posted a follow up updating the CSS to make it more accurate to the original google’s doodle, ie. adding the start up effects and now the entire doodle animation is done with just CSS, 21 divs within the animate div, within the doodle div, painting the google logo. Play button, is now a checkbox,, was a radio button before, is on the center div, to stop and play again on check/uncheck.

The horse image is the background image of a new parent div added. The play button image is now a image was a background to a lable before, to slide it off by -68px 0 easily. The keyframe animation now loops from 0 0 to -804px 0 compared to the block set of  [-67px 0pt, -134px 0pt,…..-737px 0pt] in the previous one. He still uses the CSS timing function (steps(12, end)) to delay 5 seconds for the rewind effect to occur. Now the rewind effect is done well with a cubic-bezier function, sliding the horse image position from -2412px 0pt to 0pt 0pt in a 5 second cubic-bezier transition. Wonderful work! [check out the follow up]

Update 3: (Apr 26th)

I am posting simplified and readable version of the Javascript that is used in this doodle. I did my best, eager to see what you have to say.

This works, try it.

Leave a Reply

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