HTML5 + CSS3 Title Sequence for WDS10

18 October 2010

27 comments

A Blue Perspective: HTML5 + CSS3 Title Sequence for WDS10

See the WDS10 Title Sequence

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)

Categories

, , , , , , , , ,

Comments

  1. 1/27

    Andrew K commented on 18 October 2010 @ 08:54

    Another year, another cool animation that crashes browsers! Got as far as David Gravina's title before Safari choked and closed.
    Bravo Sir ;)

  2. 2/27

    The Man in Blue commented on 18 October 2010 @ 09:10

    Hey, you were warned :)

  3. 3/27

    john Allsopp commented on 18 October 2010 @ 10:24

    I said it last Thursday, and I'll say it now - this is a milestone in the development of the web. Honored to have played out small small part in its inception ;-)

  4. 4/27

    Louis Simoneau commented on 18 October 2010 @ 15:46

    Great work! Took me a little while to grok everything that was going on in there, but fortunately Jetstar gave me those few hours by delaying our flight.

  5. 5/27

    Matt Evans commented on 18 October 2010 @ 16:44

    Stunning work Cameron.

  6. 6/27

    Michael Koukoullis commented on 18 October 2010 @ 20:54

    Awesome work, Cam. Great way to kick off the conference, so theatrical.

  7. 7/27

    Rein Baarsma commented on 18 October 2010 @ 21:01

    This stuff is awesome. Though I wonder if HTML/CSS/Javascript will ever be chosen over Flash for such animations...

  8. 8/27

    Damian Poole commented on 18 October 2010 @ 21:07

    That is amazing! I concur about wondering if HTML/CSS/Javascript could ever be chosen over Flash, I sure hope so in the future.

  9. 9/27

    Diana commented on 19 October 2010 @ 01:44

    Epic. I was already impressed without knowing how you'd created it, you are a talented man.

  10. 10/27

    Pete Ottery commented on 19 October 2010 @ 14:13

    It was amazing to start with, now I find out you had 72 hours prior to do it?! thats offensive.

    nice work :)

  11. 11/27

    Jason Neel commented on 19 October 2010 @ 23:15

    That. Was. Spectacular!

  12. 12/27

    Bill commented on 20 October 2010 @ 04:17

    Amazing man, just amazing. Sitepoint is what I used to learn how to design and develop websites and this blew me away, and I had high expectations for the man who wrote the book on Javascript for SitePoint. It's fantastic, you did an amazing job.

  13. 13/27

    George Fragos commented on 20 October 2010 @ 06:22

    A stunning work, thanks for sharing. I've started using HTML5 and CSS3 sparingly on my sites. I can't wait until I can use all of it. Played well on Ubuntu 10.10 with Google Chrome 7.0.517.41 (Official Build 62167) beta

  14. 14/27

    Craig Cadwallader commented on 20 October 2010 @ 08:12

    Truly outstanding, thank you! Now I can show some awesome capabilities "in the flesh" to all those who claimed I was dreaming and to whom I've "preached" the power of HTML5 and CSS3 for quite some time now - I am truly grateful and unbelievably impressed - congratulations!

    It worked flawlessly in Safari 5.0.2 (6533.18.5), WebKit Nightly (r69918), a bit problematically in Chrome 8.0.552.5 (screen flashes at each transition), and wouldn't open at all in Firefox 4.0b6 and Opera 10.63 (8450). I'm on a MacPro (Early 2009) single quad with 5GB RAM.

  15. 15/27

    Adam W Pitra commented on 20 October 2010 @ 12:49

    I was simply amazed that this animation was the product of code. Thank you for the effort to show the capabilities of HTML, Java and CSS3 and thanks for sharing.

  16. 16/27

    Cris commented on 20 October 2010 @ 19:32

    Brilliant stuff! I do think HTML5/CSS/JavaScript will be more used instead of Flash in the future simply because it will be way easier to change. Very encouraging!!

  17. 17/27

    Walther H Diechmann commented on 20 October 2010 @ 22:55

    stretched out flat on my back in adore!

    It is the inspiration by the likes of you that drive the web and tools and make it possible/necessary for the rest of us to redefine our goals <:)

    Thank you so much Cameron for not taking the easy option ;)

  18. 18/27

    Bobbee commented on 22 October 2010 @ 06:44

    Firefox didn't let me open...will have to try Chrome tomorrow...

  19. 19/27

    bill commented on 22 October 2010 @ 23:59

    Firefox chokes on your window.open code with a "return not in function" error. Not to teach the master anything but wouldn't:

    <a href="#" onclick="javascript: window.open('titles.htm', 'WDSTitles', 'resizable=0,width=1024,height=768,location=0'); return false;">so here it is</a>

    work better?

  20. 20/27

    Webranes commented on 24 October 2010 @ 13:11

    I agree with all the others. This is just spectacular and awesome work!

  21. 21/27

    Ed Gillett commented on 25 October 2010 @ 18:58

    Nice work Cam - very cool. The web's all grown up and animating itself these days *sniff* ;)

    Seems a long time ago indeed I was doing a Gold Channel for the IE4 launch in the UK and this new fangled DHTML thing was the new hawtness :)

  22. 22/27

    Mr.doob commented on 28 October 2010 @ 03:13

    Nicely done! :)

  23. 23/27

    Edmonton web design commented on 31 October 2010 @ 06:30

    Good stuff. Firefox had a problem :-( other than that it is GREAT.

  24. 24/27

    Jason commented on 2 November 2010 @ 02:35

    To the people wondering if CSS/JS/HTML5 will start to be widely chosen for this type of animation, this itself is the answer. Flash was never the best tool for the job, it was just the best tool we had. With things like this to show us what is possible, and the web already moving in the direction to make it easier, there's no question that in no time (figure, what, 6 months to 3 years or so as a general timeline) the tools will exist to make things like this available to people who have the creative talent but lack the same depth in technical skills.

    Bravo.

  25. 25/27

    Boris commented on 3 November 2010 @ 05:30

    Awesome stuff.

  26. 26/27

    Geld lenen commented on 3 November 2010 @ 08:46

    Wow, brilliant stuff! This is an excellent job that you've delivered.

    Anti aliasing in Safari is indeed not so good but that doesn't matter if your were using chrome to show the sequence :)

    Thumbs up!

  27. 27/27

    Grande Prairie web wesign commented on 5 November 2010 @ 11:55

    Yeah, for some reason anti aliasing is not so good in safari, but it is awesome.

  28. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed