The Man in Blue > HTML5 + CSS3 Title Sequence for WDS10

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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: