Google unleashes the power of HTML5 in its new doodle

Few days ago we saw Google celebrate the Buckyball Anniversary by adding a Buckyball animation effect instead of the second ‘o’ in ‘Google’. It used to animate when our cursor was hovered over it which gave a rotating & revolving effect.

It was the first time that Google experimented with the power of HTML5. Around three months ago we saw HootSuite5 using HTML5 to its full potential. This Google Doodle is basically an animation effect using the power of HTML5.

Remember, It works in IE8, but has some major alignment errors associated with it. It will work properly in modern browsers like Google Chrome, Safari & Firefox (Firefox 3.5 is not 100% Compatible).

How the HTML5 Doodle looks like (Undisturbed State)

When the doodle is disturbed (Animated State)

There are three instances when the Undisturbed state gets converted into Animated state. Yep, that’s where the whole fun is.

#1 Hovering

When you hover/take your mouse pointer near this new Google Doodle, then the balls which comprise the doodle start spreading. It seems like it has a repulsion force acting against the cursor.

Try taking your mouse pointer towards a ball which is trying to reform the doodle, it would move away from the cursor area.

#2 Switching Tabs/Windows (Vertical bouncing)

When you’re Google tab is open and you’re navigating to another tag then you won’t notice any animation effect. When you do the exact reverse, i.e. when you come from another tab to the already opened Google tab then you will notice a small Vertical bounce made by the whole doodle.

Similar effect will be seen even when you switch windows after some time. (This is due to the duration of inactivity in the Google page that it displays some animations similar to when switched tabs.)

#3 Zoom-In / Zoom-Out (Horizontal Bouncing)

You would probably notice a bigger animation effect as compared to the Switching tabs one, when you Zoom-In/Zoom-Out the Google homepage. Also, you can see that the bounce is horizontal and not vertical.

Out of the three effects; the first one surely stands out as the best.

Note:- This new Doodle works only in US, UK & ES

Thanks to Pradeep from HellBoundBloggers who gave this alert!

Which one did you like ? Have you noticed the 4th/5th one too ? Please do share them with us. Would add them to the list.

Tagged as: animation effect, google animated doodle, google bouncy balls, google html5 doodle