De-constructing the animated Google logo

When I first saw the aquatic looking Google logo, my first instinct was to figure out how it was built. People were tweeting that it was built in Flash, but a simple right click could tell you otherwise, and others thought that it was built using Google’s favorite language – HTML 5. But with a little further investigation, it is simply built using CSS3 and jQuery. Opening Google in any IE browser showed that it functioned all the same without the rotation of assets.

De-constructing the logo is a good exercise to help understand design patterns. Visualizing the initial comps of logo from the beginning would have most people think to cut up each fish and ocean element to create the visual effect of 3D space. However, if you look at the relationship of the elements and which piece overlaps with another, it is easy to group them into 3 sections. This allows the JavaScript to only have to animate 3 elements at one time rather than mapping out each individual design element.

This will show the completed logo with all layered images.

Each layered transparent .PNG image: