One Hour Per Second with SVG animations

“Amazing JavaScript!” might not be the first thing that comes to mind when you see One Hour Per Second. The most interesting JavaScript bits happen behind the scenes in this site from YouTube. They’ve cleverly combined web technologies to create a really fun experience.

Around twitter it was being touted as a stellar example of CSS animation. But, if you take a closer look at the animations you’ll see that most of them aren’t CSS at all.

Much of the more complex animations are actually SVG exported using Google’s Swiffy. These are cleverly layered over the CSS animations to create the overall effect. It’s done so seamlessly you hardly even notice!

With this set up, older browsers that can’t handle SVG will get .swfs as a fallback and the experience doesn’t suffer too much.

All in all it all makes for a very fun site to check out whether you view the source or not :)

One Hour Per Second from YouTube.

One thought on “One Hour Per Second with SVG animations

  1. Hello, after reading this post I want to give Swiffy a try. Can you by chance provide the SWF file used to create Bob (http://drbl.in/cIpC) and if possible the Flash project. It would serve as a great tool in trying to test Swiffy and to extend Bob’s movement. What do you guys think about on Svg and Html5 ? I’m am amazed of the quality of the SVG Girl project (http://jsdo.it/event/svggirl). I think the ability to retain the quality of the animations regardless of screen size is just amazing – an definetly the way to go – especially when creating content for both desktop and mobile devices. Have you experimented with SVG, are you going to post tutorials on this subject ?
    Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>