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.