It’s a mad, mad, mad, mad manimation

Madmanimation was a joint effort between me, Anthony Calzadilla and Geri Coady. I’ve been wanting to work with Anthony and Geri again after they both did amazing work on the launch site for Hardboiled Web Design. Madmanimation was the perfect opportunity to create something we hoped would make people go ooh!.

Anthony animated, Geri designed and I progressively enhanced. To see the mad manimation, light up a Webkit-based browser (desktop or mobile). Other browsers’ users will see something different. More on that in just a minute.

There are plenty of CSS animations out there (most of them made by Anthony) but one thing about all of them has bothered me. Their HTML is (how can I put this politely?) semantically terrible:

<div id="bg-01"><img src="01-bg.jpg" alt="">
<div id="fan-01"><div id="bg-fan"><img src="01-bg-fan.png" alt=""></div>
<div id="fan-blade"><img src="01-fan-blade.png" alt=""></div>
</div></div><div id="man-01"><img src="01-man.png" alt=""></div>
<div id="blk-curtain"></div>

Working on the early stages Madmanimation made me wonder, ‘how can we describe the content of an animation meaningfully while still creating all the hook elements we need to create it?’ What makes up an animation? A list of scenes … in order. What might the most appropriate HTML element for that be? An ordered list <ol>, with each scene list-item <li> addressable via its own id. That’s what I chose. (View source on Madmanimation.)

<ol id="animation">
<li id="scene-01">…</li>
<li id="scene-02">…</li>
<li id="scene-03">…</li>
…
<li id="scene-016">…</li>
</ol>

Inside each list-item goes a description of the content/action/events that are happening in that scene:

<li id="scene-01">
<p>Don Draper pauses in the doorway of his Manhattan office.
Everything except fan blades are still.
Don’s desk is littered with bottles and glasses</p>
</li>

Now, instead of junk in our HTML, we have content that’s meaningful, accessible and SEO-friendly. We’re also able to style that content in about a gazillion different ways based on the capabilities of any browser or device.

You could, if you wanted to, style the list using lovely clear and readable typography, that would look great on even old or less capable browsers.

You could, if you prefer, style the list using floats and background images to create a storyboard. This looks great too.

Plus, a person who uses a modern, yet animation-incapable browser like Firefox 4 wouldn’t know about the animated alternative that their friends are seeing. Call that hardboiled if you like (I do), but that’s progressive enhancement in its truest form.

Modernizr

Modernizr’s not only useful for testing browser capabilities and adding classes to bind CSS styles to, it also creates a Modernizr Javascript object that we can utilise. For Madmanimation, we used Modernizr and jQuery to append the elements needed by the animation to each list-item.

if (Modernizr.cssanimations) {

$("#scene-01").append('<div id="bg-01"><img src="01-bg.jpg" alt="">
<div id="fan-01"><div id="bg-fan"><img src="01-bg-fan.png" alt=""></div>
<div id="fan-blade"><img src="01-fan-blade.png" alt=""></div></div></div>
<div id="man-01"><img src="01-man.png" alt=""></div>
<div id="blk-curtain"></div>');});

Then we added a little more Javascript to trigger the start of each scene, by adding and removing a ‘go’ class at specific intervals.

$("h1 a").click(function() {
var li = $('#animation li');
var delays = [4500,2000,2400,2200,5000,3000,3000,3800];
function sumPrev(array, index){
var sum = 0;
for(var i = 0; i < index; i++){
sum += array(i);
}
return sum;
}

li.each(function(i){
setTimeout(function($ele){
$ele.addClass("go").siblings().removeClass("go");
}, sumPrev(delays, i), $(this));
});

What’s different about Madmanimation is how it’s built on solid, semantic foundations. This was certainly the aspect that sparked most of the conversation at An Event Apart. I also love how its approach means meaningful, accessible, SEO-friendly content and that in turn demands strategy, creative writing and storytelling as part of the process. The written word is as important as the animation.

Two things remain.

I want to say a huge thank-you to Anthony Calzadilla and Geri Coady for their hard work in making Madmanimation, and my talk for this year, possible. Hire them, they’re amazing. I also want to thank Geri, Nate Croft, Kat Durrant, Peter Hart, Mark Jaquith, Chris Jennings, Jeremy Keith, Maykel Loomans, John Morrison - Subism.com, Stefan Nitzsche, Warren Parsons and Jeffrey Zeldman for allowing us to use their photographs by saying ‘yes’ or publishing them under a Creative Commons licence.