Mozilla Hacks

Making the Dino roar – syncing audio and CSS transitions

Avatar photo By Chris Heilmann

Posted on March 20, 2012 in Audio and CSS

It started with Brian King setting up our Google+ page using this round MDN logo by John Slater. I thought this looks cool and reminded me of the famous MGM intro so I wondered if I could turn it into an intro for our video tutorials (not sure if we will do that though). And, some photoshop and sound work later and with a sprinkle of HTML5 audio and CSS transitions, here we are (source on GitHub):

I started with the sound. If you need Creative Commons licensed sounds, Freesound is a good resource. So I took Chinese Fanfare by Nick-Nack and Roar by CGEffex and put them together in Audacity.

Saving them as OGG and MP3 gave me an audio element that I could tie into. All I needed was to listen to the timeupdate event and compare the currentTime to trigger the animations. The animations (rotation of the dino and opening and closing of the jaw) are CSS transitions triggered by classes on the parent element. The main trick was to store both the dino and the jaw inside a div and transition them separately. The jaw animation also needed a change in transformation origin as we don’t rotate the image around its center.

If you got seven minutes to spare, here is a blow-by-blow screencast explaining what is going on:

About Chris Heilmann

Evangelist for HTML5 and open web. Let's fix this!

More articles by Chris Heilmann…

7 comments

  1. Mardeg

    I’m a little saddened by this, still needing javascript for synching at all almost 7 years after one of my very first comments on bugzilla was hopeful about SMIL on the audio tag:
    https://bugzilla.mozilla.org/show_bug.cgi?id=216462#c6
    Is it too late to still hope for that?

    March 20th, 2012 at 09:13

    1. Jakob

      You don’t have to use JavaScript, you could also use CSS animations.

      March 20th, 2012 at 10:42

      1. Jakob

        And this [1] is the proof.

        [1]: https://dl.dropbox.com/u/18835355/html/animation_syncing/anim.html

        March 20th, 2012 at 11:33

        1. Chris Heilmann

          Very cool. But as you state – you still use JS to make sure the syncing happens when all the things have loaded, so in essence this is the same. I used transitions as they are better supported across browsers. But nothing stops you from achieving this with animations.

          March 20th, 2012 at 12:06

  2. Josh Matthews

    That’s fantastic.

    March 20th, 2012 at 11:20

  3. Caspy7

    My first thought was to implement a song using typography/lyrics in creative ways like this one:
    http://www.youtube.com/watch?v=CJA69C6SlRk
    Doing something like this in HTML would seem like a nice proof of concept.

    Though my dream would be that it could then be created using a tool/program which wouldn’t require any code knowledge (just as that original likely was).

    March 21st, 2012 at 14:43

  4. SayaK

    Great tutorial! I have a question. How would you change the script so the animation and sound run onclick instead of automatically when the page loads? I’m trying to do something similar where the user clicks a button to trigger the animation and audio.

    November 24th, 2012 at 00:34

Comments are closed for this article.