Ryan Germick Explains the Crushinator

This post is a companion piece to an interview I published at Smashing Magazine. Here, Google Doodle team lead Ryan Germick explains the creation of a web animation technique dubbed The Crushinator.

“Crushinator started last year at Fourth of July because I wanted to do a [Google Doodle] animation for Rube Goldberg in tandem with the Fourth of July. I didn’t want to use Flash but I animated the Rube Goldberg device in Flash and I asked Marcin if there was a way that we could do it with sprites… What he did was he built – on a bus ride home in like 45 minutes – he built a program using JavaScript, CSS3, and Canvas. He took the individual frames and exported them from Flash… and he analyzed each frame to find what the minimum rectangle size was from frame to frame, and then isolated those pixels, and then reassembled them into one long horizontal sprite, and captured the data of the location of them… and then repeated the div onto itself to create the illusion of animation. It’s really just one big sprited div that just goes from place to place to place.”

2 Responses to “Ryan Germick Explains the Crushinator”

  1. […] Ryan Germick explains the Crushinator […]

  2. […] Ryan Germick explains the Crushinator […]

Leave a Reply