Animated Music Videos

with CSS3 Animations and HTML5 Audio

RachelNabors.com @RachelNabors

Follow along at:
RachelNabors.com/css-amv-talk

A manga-inspired self-portrait of Rachel, clutching a laptop and looking adorable.
with Rachel the Great (aka Rachel Nabors)

I am Rachel the Great Nabors

Rachel the Great and her talking cat Tuna, waving.
You can still read the comic adventures of Rachel and Tuna at RacheltheGreat.com

Mission Statement

What we are covering

What we’re NOT covering

Some assumptions

Making an Animated Music Video

Why animating in the browser kicks ass

The Music

“CANDY CANDY” by きゃりーぱみゅぱみゅ (Kyary Pamyu Pamyu)

There is no way we can top that video.

Storyboarding

I made a storyboard for us at RachelNabors.com/css-amv-talk/storyboard

(Shoo shoo, go analyze.)

The Final Product

This is what it looks like when it all comes together.

Let me show you how it's done.

Staging and Positioning

Crafting Experiences in 2.5 Dimensions

...refers to moving 2 dimensional constructs in 3 dimensions.

The Browser as a Stage

Think of the different pieces of animation as happening on stages... in the DOM!

Hardcore Animation Techniques with CSS

The Walk Cycle

A walk cycle is the “Hello, world!” of animation.

Sprites: Bundling many states into one

Flicking Steps: How do they work?

Steps are magical and poorly documented.

“Cut-out” animations with nested elements and sprites

Old technique saves time and reduces unique graphics.

Making things move with Transitions

Never use JavaScript where a transition will suffice.

Transitions vs. Animations

When should you use which?

Animations

Transitions

Timing Animations with Delays

We need to make Tuna sit down exactly 4 seconds in.

We can do this with animation-delay and a second animation.

Loading and Playing

The Playing States

Referring to the storyboard, you can see there are 3 states:

  1. Loading JS, CSS, music and images are still being downloaded.
  2. Loaded They are all downloaded. We are go for play.
  3. Playing User has indicated to begin the animation.

Start the page in a default state of .loading.

<body class="loading">

Stages should be hidden and shown to prevent content flashes:

.loading .stage, .loaded .stage { opacity: 0; }
.loading #curtains, .loaded #curtains { opacity: 1; }
.playing .stage { opacity: 1; }

Sensing Play Readiness

This is one of the few reasons to use JavaScript in this kind of animation.

Loaded

Swap classes on $(window).load():

$("body").removeClass("loading").addClass("loaded");

Playing

The playing state needs to be attached to the curtain tassel.

$("#tassel").click(function(){
    $(this).addClass("pulled");
    $("body").removeClass("loaded").addClass("playing");
});

Kicking off animations with play states

It's no good to have animations running behind a curtain before the music starts!

2 Ways to Kick off animations

  1. Adding .playing to all animation and timing styles.

    Great for multi-stage animations

  2. Using animation-play-state: paused/running;

    Great for linear, simple “single-stage” or granular animation.

Hiding and showing things

Some things need to stay hidden until the appropriate time to reveal.

Manipulating Music

The Loaded Chime

When everything is ready to play, play a chime from the opening to Kyary's other song about eyelashes.

Let's use real HTML5 audio markup.
And use real JS to kick the music off in the loaded state:
document.getElementById('chime').play();

Syncing music with animation

No JS timer needed. JS + CSS timers run side by side.

Just kick them off at the same time.

HTML5 Audio is not what it should be

Just the Beginning!

With these skills, you can build all kinds of nifty interactions, like this.

Follow me on Twitter @RachelNabors and keep an eye on #AliceInVideoland

Slides: RachelNabors.com/css-amv-talk

More animation goodies at my site: RachelNabors.com

/

#