Animation School

A crash course in CSS3 and HTML5

RachelNabors.com @RachelNabors

Prepare for class!

  1. Open Google Chrome
  2. Go to RachelNabors.com/animation-workshop
  3. Hang onto yer butts
A manga-inspired self-portrait of Rachel, clutching a laptop and looking adorable.
with Rachel the Great (aka Rachel Nabors)

Mission Statement

Learn old school animation techniques alongside newfangled front-end magic.

What we are covering

And there will be lots of example animations to watch and code along the way!

What we are NOT covering

Why are you here, learning this?

Our code lab environment

Code in the wild

Animating with CSS

Transitions

CSS Transitions

Anatomy of a Transition

Handy Tip

You only need to set two properties to make a working transition, transition-property and transition-duration. The rest is set by default!

CSS Transitions

Shorthand Version

transition: <transition-property> <transition-duration> <timing-function> <transition-delay>;

Transitioning Multiple Properties

Separate them with a comma.

transition-property: background, left;
transition-duration: 1s, 3s;

Transitioning Multiple Properties in Shorthand

Group statments with commas.

transition: background 1s, left 3s;

Alternatively, transition all the defined properties with all.

CSS Transitions

Exercise: Rolling a Ball

Now try using what you just learned. This will be fun!

See the Pen Rolling a Ball with Transitions by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen

Start Coding! cdpn.io/koEjl

Keep this animation project open a bit—we're going to experiment!

Focus on…

Timing Functions

“Cushioning” in Animation

In animation, “timing functions” are called “cushioning”

Science! A falling ball picks up speed due to gravity. A rolling ball slows down from friction.

Timing Functions

“Cushioning”

Try rolling your ball with some these timing functions:

Timing functions are defined by a bezier curve, which means you can make your own at cubic-bezier.com! Give it a try!

Check out this visual Easings Cheat Sheet

Focus on…

Play State

Play State

The Playing States

This is one of the few reasons to use JavaScript with your animation.

These are the mandatory play states to handle asset loading:

  1. Loading JS, CSS, music and images are still being downloaded.
  2. Loaded They are all downloaded. We are go for play.

Optional Play States

Because complex interactions have complex needs.

Play State

Exercise: Sensing Visual Play Readiness

Start all animations with a default parent class of .loading.

Loaded

jQuery's $(window).load() fires when the browser has all the CSS, images, and JS in place and has painted the window.

Hook into this event to swap the .loading class for .loaded or .playing like so:

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

Start Coding! cdpn.io/AEjrF

Focus on…

Staging

Staging

Crafting Experiences in 2.5 Dimensions

立版古 (tatebanko), popular in Japan for hundreds of years. You can even buy kits today. A Japanese diorama or Hokusai's wave painting.

Staging

Examples

Look at the interplay of the different layers in 2.5 dimensions in these examples:

Staging

The Browser as a Stage

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

Staging

Multi-Scene Example

The multiple opening scenes are contained in #scene1 and #scene2. Let's have a look inside!

Watch it in action!

CSS Transitions

Exercise: Showing and Hiding

To quickly show or hide a scene, transition opacity quickly from 1 to 0.

Start Coding! cdpn.io/pgACi

CSS Transitions

Showing and Hiding Recap

Why can't we use display: block/none?

Cryptic Answer What does the intermediate step between display: inline and display: block look like?

What is the performance cost of opacity?

Answer It's actually extremely performant, as opacity is usually handled directly by the GPU. Don't believe me? Ask Paul Irish.

CSS Transitions

Exercise: Iris Wipe

This one was hard for me to figure out...

CSS masks can't be animated, nor radial gradients. BAH.

I ended up using a big background image that I shrank to fit using background-size

Start Coding! cdpn.io/FJgtC

See the Pen Scene Transitions: Iris Wipe by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen

CSS Transitions

Exercise: Fading to Black

Fading to black is a lot like hiding with opacity, we just slow down the transition-duration and make sure there's a black background.

See the Pen Scene Transitions: Fade to Black by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen

Start Coding! cdpn.io/CIpGv

Try it at home! Wouldn't it be cool to fade into a new scene on a layer underneath the old one? That's called a “cross-fade”!

CSS Transitions

Browser Support

CSS transitions are supported by all browsers in use today, with the exception of IE 9 and lower and Opera Mini.

Check out that support: caniuse.com/#feat=css-transitions

Resources

Thank God We Have a Specification!

CSS Transitions

Questions?

A reminder to everyone to slow down, discuss, and watch cartoons.

Animating with CSS

Animations

CSS Animations

Anatomy of an Animation

Animations share many similar properties and syntaxes with transitions... with a few big differences!

.animated-thing {
  animation: black-to-white 1s linear 1;
}

@keyframes black-to-white {
  0% { background: #000; }
  100% { background: #fff; }
}

CSS Animations

Anatomy of the animation Property

Let's have a look under the hood!

.animated-thing {
  animation: $name $duration $timing-function $animation-delay $iteration-count;
}

CSS Animations

Anatomy of the animation Property: Long Form

CSS Animations

Advanced Anatomy of the animation Property

That was pretty similar to transition, but animation has a few more very special properties:

.animated-thing {
  animation: $name $duration $timing-function $animation-delay $iteration-count $direction $fill-mode $play-state;
}

In Long Form

CSS Animations

Anatomy of a @keyframes Block

Rather than targeting a single property like transition-property does, the @keyframes block can define a group of properties and their values.

@keyframes black-to-white {
  0% {
    background: #000;
    color: #fff;
  }
  100% {
    background: #fff;
    color: #000;
  }
}

CSS Animations

Multiple steps inside a @keyframes Block

@keyframes black-red-white {
  0% {
    background: #000;
    color: #fff;
  }
  50% {
    background: red;
    color: blue;
  }
  100% {
    background: #fff;
    color: #000;
  }
}

CSS Animations

Multiple animations on a single rule

.animated-thing {
  animation:
    black-to-white 1s linear 1,
    black-red-white 2s ease-out infinite 2s;
}

You can write it out in long-hand, too, just like with transitions, but I think the above looks tidier.

Resources

Best CSS animation reference: css-tricks.com/snippets/css/keyframe-animation-syntax

CSS Animations

Meet steps()

It splits a block of keyframes into equal steps, then hops between them.

The documentation was written by mathy programmer types.

Tab Atkins tried to explain it, but it's still easier to show you.

This is how it works, plus gotchas.
Check out this Pen!

Go fiddle with it: cdpn.io/zeFqy

CSS Animations

The Walk-Cycle

The "Hello World" of animation.

This is Rogue from X-Men: Evolution courtesy of Steve Gordon.

What it looks like on paper

CSS Animations

Exercise: Making a Walk-Cycle

Starring my old comic character Tuna!

Here's the sprite we're using to animate him: stash.rachelnabors.com/animation-workshop/sprite_catwalk.png

See the Pen DIY Catwalk(cycle) by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen

Start coding: cdpn.io/cdqga

CSS Animations

Stacking animations

You can run one animation after another using animation-delay, as in this example:

See the Pen From walk to run by Rachel Nabors (@rachelnabors) on CodePen

Note the importance of animation-fill-mode: forwards. What would happen without it?

Start coding: Make Tuna sit down! cdpn.io/Djcya

CSS Animations

Cut-outs

“Cut-outs” were invented to save time and money.

Example 1: A classic Disney animation with no cut-outs.

Example 2: In Japan, the technique became the workhorse of animation thanks to Tezuka's pioneering efforts.

Watch The Importance of Yogi's Collar

CSS Animations

Making Cut-outs

One more cool example:

Check out this Pen!

CSS Animations

Now it's your turn to have some fun!

Using Cut-outs in the Browser

We can use this technique to reduce the number of assets required to animate something on a page.

Check out this Pen!

Let's take this apart together.

Challenge, try making her reverse the direction of her hands: cdpn.io/ucBAz

CSS Animations

Parallax Backgrounds

Parallax is when multiple background layers are moved at different speeds to imitate how views change when moving.

Required the multipane camera invented by Ub Iwerks in 1933.

Example 1: Miyazaki uses the technique to establish beautiful countrysides in Princess Mononoke. Watch the mountains and clouds.

Example 2: He uses it more subtly in Howl's Moving Castle. Can you spot the parallax? Say “parallax!” every time you see it.

Example 3: Used masterfully to great effect in The Last Unicorn.

Example 4: Used subtly, it can add extra pop to dynamic designs.

CSS Animations

Example Parallax Backgrounds with CSS

Check out this Pen!

Notice how things in the foreground move faster than those in the background.

CSS Animations

Exercise: Parallax Backgrounds with CSS Background-Position

The shorter images have less distance to cover in the same amount of time as the longer images, so they move slower.

Start coding: cdpn.io/qkeou

CSS Animations

Parallax Inspired Web Design

Resources

CSS Animations

Browser Support

CSS animations are supported by all browsers in use today, with the exception of IE 9 and lower and Opera Mini.

Check out that support: caniuse.com/#feat=css-animation

CSS Animations

Questions?

When to Use

CSS Transitions vs. Animations

CSS Transitions vs. Animations

Animations

Transitions

Sounds and Music

With HTML5 Audio

HTML5 Audio

Anatomy of an audio tag

Look at the HTML in here:

Check out this Pen!

HTML5 Audio

Attributes of an audio tag

Sources of an audio tag

HTML5 Audio

Exercise: Making an Audio Element

Now I'd like you to create a looping HTML5 audio element.

Start coding! cdpn.io/ctrBw

HTML5 Audio

Audio Sprite with Loop

Check out this Pen!

To get rid of the gaps, we could use Seamlessloop.js like so.

Focus on…

Play State II: Playing

Play State II: Playing

Sensing Audio Readiness

HTML5 audio's API is pretty meh when it comes to playback and manipulation, but it does have some sweet events.

canplaythrough let's us know when the media should be able to play from start to finish without pause at the current download rate.

You can hide everything behind a loading screen while waiting.

Then you can kick off your .playing state automatically or after a user interaction (preferably the latter)!

Play State Part II

Exercise: Return of the Loading Screen

See the Pen DIY canplaythrough() demo by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen.

Nest this inside our window.load() function to wait until both the window has been painted and the music is ready to play:

song.addEventListener("canplaythrough", function () {}, false);

Start coding: cdpn.io/xGoAH

HTML5 Audio

Browser Support

HTML5 audio is widely supported by all major browsers in use today.

Check out that support: caniuse.com/#feat=audio

Firefox, Chrome, Android, and Opera support ogg/vorbis. IE, Safari, Chrome, Android, and iOS support mp3.

Mobile support requires further reading.

HTML5 Doctor has a great rundown of these audio formats as well as other fun audio bits and bobs.

HTML5 Audio

Questions?

Now watch this recording of a classic Flash animation from the heyday of Flash animationery!

Ironic that it's a <video> of a Flash animation (at least if you're on mobile). Contemplate the meta-ness of it all.

Focus on…

Synching Music with Animation

Synching Music with Animation

Two Clocks

When I made Candy Halo, I thought I'd need way fancy JavaScript to keep everything in synch.

The solution was deceptively simple.

CSS and Web Audio/JavaScript have separate clocks.

You just need to kick them off at the same time.

Further reading: Chris Wilson's A Tale of Two Clocks

Performance

With Chromium's Developer Tools

Performance

Frames Per Second

To be visually pleasing on the screen, you need about 60 frames per second.

Frame Rate on the computer is not the same as it is in the movie theatre.

Balance framerate with performance, battery life, quality of animation.

Let's check out some tools that will help you see what's happening where and why.

Performance

Checkout Chrome's FPS counter

  1. Open your Developer Tools.
  2. Press the Escape Key to bring up a console window.
  3. Choose the Rendering tab.
  4. Check the Show FPS meter option.

Performance

Kicking things to the GPU

(AKA “Hardware Acceleration”)

To reduce CPU cycles, you can coerce the GPU into handling them.

The most common way is to use a fake-out 3D transform like so:

.resource-sink {
  transform: translateZ(0); //does nothing visually
}

Performance

Why Hardware Acceleration Coercion is a bad idea

My advice: Trust the browser.

But if it's mission critical, check this out: Let’s Play With Hardware-Accelerated CSS

Performance

Paint Rectangles

To enable Chrome's paint rectangles:

  1. Open your Developer Tools.
  2. Press the Escape Key to bring up a console window.
  3. Choose the Rendering tab.
  4. Check show paint rectangles under Rendering

Now have a second look at NyanTuna with the web inspector open

Red paint rectangles show what's being repainted by the CPU.

Performance

Resources

Performance

Questions

Just the Beginning!

Resources

Keep in Touch

I'd love to see what you create!

/

#