Animation School
A crash course in CSS3 and Web Audio
RachelNabors.com @RachelNabors
Prepare for class!
- Open Google Chrome
- Go to RachelNabors.com/animation-workshop
- Hang onto yer butts
RachelNabors.com @RachelNabors
Learn old school animation techniques alongside newfangled front-end magic.
And there will be lots of example animations to watch and code along the way!
I'll tell you why.
transition-property: the property you want to transition—Debugging tip! Only some properties are transitionable. Reference this handy list of transitionable CSS properties.transition-duration: how many long the transition lasts in seconds of milliseconds: 4s or 4000mstransition-timing-function: “cushioning” for the transition, defaults to ease.transition-delay: the number of milli/seconds to delay the transition instead of playing right awayYou only need to set two properties to make a working transition, transition-property and transition-duration. The rest is set by default!
transition: <transition-property> <transition-duration> <timing-function> <transition-delay>;
Separate them with a comma.
transition-property: background, left; transition-duration: 1s, 3s;
Group statments with commas.
transition: background 1s, left 3s;
Alternatively, transition all the defined properties with all.
Now try using what you just learned. This will be fun!
Keep this animation project open a bit—we're going to experiment!
See the Pen Rolling a Ball with Transitions by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen
Start Coding! codepen.io/rachelnabors-teaching/pen/koEjl
In animation, “timing functions” are called “cushioning”
Science! A falling ball picks up speed due to gravity. A rolling ball slows down from friction. How could science apply to UI design?
Try rolling your ball with some these timing functions:
linearease-inease-outease-in-outcubic-bezier(ROLL YOUR OWN!)Timing functions are defined by a bezier curve, which means you can make your own at cubic-bezier.com! Give it a try!
This is one of the few reasons to use JavaScript with your animation.
These are the mandatory play states to handle asset loading:
Because complex interactions have complex needs.
Start all animations with a default parent class of .loading.
jQuery's $(window).load() fires when the browser has all the CSS, images, and JS in place and has painted the window.
Help! Still looking for a pure JS solution for this. (Reward of cookies.)
Hook into this event to swap the .loading class for .loaded or .playing like so:
$("body").removeClass("loading").addClass("loaded");
Start Coding! codepen.io/rachelnabors-teaching/pen/AEjrF
立版古 (tatebanko), popular in Japan for hundreds of years. You can even buy kits today.
Look at the interplay of the different layers in 2.5 dimensions in these examples:
Think of the different pieces of animation as happening on stages... in the DOM!
position for the props and actors.opacity for showing and hiding the scene.The multiple opening scenes are contained in #scene1 and #scene2.
To quickly show or hide a scene, transition opacity quickly from 1 to 0.
Start Coding! codepen.io/rachelnabors-teaching/pen/pgACi
display: block/none?Cryptic Answer What does the intermediate step between display: inline and display: block look like?
Answer It's actually extremely performant, as opacity is usually handled directly by the GPU. Don't believe me? Ask Paul Irish.
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! rachelnabors-teaching/pen/FJgtC
See the Pen Scene Transitions: Iris Wipe by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen
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! codepen.io/rachelnabors-teaching/pen/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 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
A reminder to everyone to slow down, discuss, and watch cartoons.
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; }
}
animation PropertyLet's have a look under the hood!
.animated-thing {
animation: $name $duration $timing-function $animation-delay $iteration-count;
}
animation Property: Long Formanimation-name: The name of the keyframe block you want to use.animation-duration: how long the animations takes to go from 0% to 100%animation-timing-function: In addition to the previously covered timing functions, this can also take steps()...animation-delay: the number of seconds to delay the animation instead of playing right awayanimation-iteration-count: number of times you want to go from 0% to 100% or infinite to never stop.animation PropertyThat 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;
}
animation-direction: defaults to normal but can be set to alternateanimation-fill-mode: should the final state of the animation be like 0% or 100%? Use backwards or forwards respectively. Also, can use both. Defaults to backwards (“reset”).animation-play-state: defaults to running but can be set to paused.@keyframes BlockRather 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;
}
}
@keyframes Block
@keyframes black-red-white {
0% {
background: #000;
color: #fff;
}
50% {
background: red;
color: blue;
}
100% {
background: #fff;
color: #000;
}
}
.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.
Best CSS animation reference: css-tricks.com/snippets/css/keyframe-animation-syntax
steps()The timing-function steps() is exclusive to animations
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.
Go fiddle with it: codepen.io/rachelnabors/pen/zeFqy
The "Hello World" of animation.
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: codepen.io/rachelnabors-teaching/pen/cdqga
“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.
Example 3: Hannah-Barbera used the technique to cut costs and production time on shows like The Flinstones.
Example 4: A modern example from Japan.
Example 5: Because we need more Sailor Moon.
We can use this technique to reduce the number of assets required to animate something on a page.
One more cool example:
Now it's your turn to have some fun!
Freestyle to your heart's content: codepen.io/rachelnabors/pen/ucBAz
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: In games like Sonic the Hedgehog, parallax is used to show speed and add depth.
Example 4: Used masterfully to great effect in The Last Unicorn.
Example 5: Used subtly, it can add extra pop to dynamic designs.
Example 6: But it can be over-done.
Notice how things in the foreground move faster than those in the background.
Start coding: codepen.io/rachelnabors-teaching/pen/qkeou
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
If you don't have questions, I'm not dazzling you enough. PICK UP THE DAZZLEMENT, RACHEL.
autoplay will automatically play the file, but it's disabled in some browsers like IE10 RT and iOS Safariloop sets the track to repeat over and over again.preload can be set to auto, metadata or none. Defaults to autosrc or <source>type property lets the browser know whether or not to download the file. Performant! But you can leave it out, and the browser will try to download and play all sources till one works.Now I'd like you to create a looping HTML5 audio element.
Start coding! codepen.io/rachelnabors-teaching/pen/ctrBw
To get rid of the gaps, we could use Seamlessloop.js like so.
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)!
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: codepen.io/rachelnabors-teaching/pen/xGoAH
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.
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.
The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications. Boris Smus
Pencils down. This is mostly theory. No exercises. That's for another workshop.
All this takes place in a JavaScript object called the AudioContext.
This is how you'd start one:
context = new AudioContext(); // be sure to do your prefix sniffing
Sound can be gotten in two ways:
audio element.With buffers, because of XMLHttpRequest, the audio file needs to be from the same domain as the JS that calls it.
With Audio Source Nodes from audio, you'll have access to canplaythrough.
Beware of file types! Same limitations as HTML5 audio.
You can have multiple AudioBuffers within the same AudioContext.
When you want to manipulate AudioBuffers and AudioSourceNodes before outputting them, you pipe them through AudioNodes.
You connect an input to a gain node to the output like so:
// Create a gain node. var gainNode = context.createGain(); // Connect the source to the gain node. source.connect(gainNode); // Connect the gain node to the destination. gainNode.connect(context.destination);
Further exploration of nodes, should time allow!
var context = new AudioContext();
function playSound(buffer) {
// create a sound source
var source = context.createBufferSource();
// tell the source which sound to play
source.buffer = buffer;
// connect the source to the context's destination
source.connect(context.destination);
// play!
source.start(0);
}
Check out NyanTuna!!
Now check out the source at github.com/rachelnabors/nyantuna
book also by Boris SmusAudioNodesWhen 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
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.
Don't be this guy.
Let's check out some tools that will help you see what's happening where and why.
(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
}
My advice: Trust the browser.
But if it's mission critical, check this out: Let’s Play With Hardware-Accelerated CSS
To enable Chrome's paint rectangles:
Now have a second look at NyanTuna with the web inspector open
Paint rectangles show what's being repainted. Fewer rectangles != always better.
Check out that walk cycle with the Dev Tools Timeline.
I'd love to see what you create!
/
#