Google Chrome Story

While at Psyop, I worked with a small team to design an animate this short video about google chrome's exciting history. The video was announced at Google's IO developer conference and contained several easter eggs which resulted in prizes for sharp eyed conference attendees.

Making The Chrome Story

This was a particularly fun project for me because it brought together my background in animation and my love for web technology.

Telling the Chrome story posed some interesting animation challenges. A variety of techniques were used including stop motion, 2D keyframe animation, 3D rendering, custom CSS/Javascript animation and a carefully orchestrated use of video screen capture tools.

Process Breakdown

In some cases web pages were saved as pdf’s, opened in Illustrator, broken into component parts and then brought into After Effects for animation. This process gave us vector UI elements and allowed us very fine grain control over the final animation.

Other times, a screen recording of the actual web interface was the best solution. Several scenes required DOM manipulation (removing unnecessary HTML) and CSS modification to create a faux green screen that could be used to further separate animated elements in post.

Easter Eggs

The video premiered at Google’s annual IO conference as well as being promoted on Chrome’s YouTube channel. For viewers with a sharp eye, a short URL was hidden in the video. The first handful of people to discover the link were given a chance to win the newly announced Chrome Book.

In addition the the official Easter eggs, the team placed a few hidden credits of our own. In the stop motion downloading scene, the download directory shows the usernames of the people involved in making the project.

Result

The video was extremely well received by the web community as seen by an almost unheard of showing of positive YouTube comments and support.


Nike Kobe X
Font Lens
Google Chrome Story
Diligent
Oslo Freedom Forum
Container Typeface
Domain Search Tool
Target Popcicle
Triad
Nintendo Portal
2Sigma
Educational Space
Natural Type
Hyundai Soccer
Gif Patterns
Crown Castle Illustrations
Black And White
Type Experiments
Cornell Tech
Crown Castle Site
RUN