Animation Studio
Power Techniques

with CSS3

With cartoonist turned web developer Rachel Nabors! @RachelNabors

Follow along at

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

My new canvas

Tin Magpie
Now I tell stories using my front-end development skills at my company,

Assumptions! We have them!


Prototyping with the 4th dimension

Originally started at Disney while working on Snow White.

Now adopted by film, interaction, comics, anything that involves time and teams.

Example storyboard for a music video:

The Walk Cycle

The “Hello, world!” of animation

Rogue's walkcycle kindly provided by master character designer and animator Steven K. Gordon.

Walkcycles with CSS

Cut Outs

Cutting Corners with “Cut-outs”

Technique developed in Japan and by Hanna-Barbera to bring cartoons to TV rapidly.

(See 1:04)

See also The Importance of Yogi's Collar

Cut-outs with CSS

Scene Transitions

Changing Mindsets and Changing Scenes

Scene transitions signal to audiences a change in mood, time, or location (or sometimes just a commercial break!)

Think of them like a period between sentences or a space between paragraphs.

Scene Transitions with CSS

See the Pen The Black Brick Road of OZ, #11 by Rachel Nabors (@rachelnabors) on CodePen

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


Parallax in Animation

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

Required the multiplane camera invented by Ub Iwerks in 1933.

Parallax with CSS

Check out this Pen!

Parallax in Theory

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

You can do it with 3D transforms, too!

Cushioning, Easing, 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. How could science apply to UI design?

“Cushioning” with CSS

See the Pen Rolling a Ball with CSS Transitions by Rachel Nabors (@rachelnabors) on CodePen

CSS's timing functions:

Why animating in the browser kicks ass

Just the Beginning!

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

Where to go from here


More examples and slides at & on my screencast,

My master class workshop on animations is at Frontend Masters.