Search code examples
animationhtml5-animation

How does Google animate their logos?

I've been trying to figure out how Google animate their logos since the particle explosion one a while back, and today they have a chemistry set to celebrate the 200th anniversary of Robert Bunsen.

I'm assuming this is HTML5 (I'm using Firefox 4, Chrome and Safari 5), but can anyone confirm if so and whether there are any good tutorials on how to do those types of animations?

Solution

  • This is partialy HTML5:

    1. they use cross-browser sprite technique - one PNG image with multiple scenes.

    They clip area of one scene and display it. To show next scene they just shift clipping area start offset.

    Just check with Firebug: image is set as background of div tag with heigth exactly of one scene, then they shift Y-offset and background "moves" - just like film tape :)

    Here is snippet (Google (C)), notice -380px and then -570px:

     <div style="background: url("/logos/2011/bunsen11-hp-sprite.png")
 no-repeat scroll 0pt 
-380px transparent; height: 190px; opacity: 0.3;
 position: absolute; width: 465px; z-index: 20;"></div>

 <div style="background: url("/logos/2011/bunsen11-hp-sprite.png")
 no-repeat scroll 0pt
-570px transparent; height: 190px; opacity: 0.3;
 position: absolute; width: 465px; z-index: 20;"></div>

    Here is good DIY example from stack: How to show animated image from PNG image using javascript? [ like gmail ]

    Update: 2. They also use HTML5 canvas to produce part of animation with interactive effects - bubbles for example.