There's nothing that has quite the ability to sharpen one's creative process like a ridiculous deadline. In this case a 72-hour deadline to complete the opening titles for the Web Directions South conference -- all the way from creative brainstorming to seeing it on-screen in front of 600 people.
Because of the nature of the conference and the talk I gave on browser animation the previous Friday, I decided not to take the easy option (by doing it in After Effects) and instead opted for the much more perilous path of HTML5 & CSS3. 2458 lines of JavaScript and 841 lines of CSS later, I had a title sequence I was pretty happy with.
Although I don't encourage you to look at the code, I'm sure some people will. Timeline animation code is never the prettiest (because it has to be so sequential) and three late nights of frantic coding make it doubly so, but here are a few clues that might help you navigate the morass of functions and variables.
- There's no magic used to synchronise visuals with audio -- I manually went through and timecoded the specific spots in the song I wanted to sync with, then got the JavaScript to trigger animation at those points.
- Although HTML5 audio has a timeupdate event that fires regularly to tell you where the audio is up to, it doesn't have great accuracy (it fires about once every 300 milliseconds). So, I had to write my own tick() function which manually checks the audio's currentTime and keeps the animation synchronised with the sound.
- I wrote this specifically for Chrome (lots of -webkit prefixes), as it seemed to have the highest frame rate and smoothest animation. Alarmingly, Safari and Chrome nightlies both exhibited really bad up-scaling and font anti-aliasing when using CSS transforms and Chrome showed some really bad animation artifacts. Hopefully these get fixed before they make it into stable builds.
- Animating the opacity of text can be a little clunky, particularly in the last 10%. For some reason when you animate to 100% opacity the browser does weird (strong) anti-aliasing on the text just as it hits 100%; to avoid this I only animate to 90% opacity.
- It's amazing how effective a 2 pixel high div is at emulating a line (particularly when you rotate it using CSS transforms).
- Magic numbers produce a lot of magic.
For me, the code is kind of redundant -- it was just what was necessary to produce what I saw in my head. The great thing about it is that it didn't provide much of a barrier to doing so; there were relatively few spots where I had to compromise my creative vision for what was possible with the tools I had chosen.
Thanks to Maxine and John for providing the giant screen space which inspired this piece, and thanks also for the "sharpened creative process" which helped drive me :P
The music used is Hans Zimmer - Time (We Plants Are Happy Plants Remix)