Web Animation Resources

A growing collection of resources to help you get started with animation on the web. Last updated on Friday 20th June 2014.

Articles

UI Animation and UX: A Not-So-Secret Friendship

by Val Head

Val’s article includes practical examples on how to us animation to improve UX, with some great CSS demos.

Web Animation at Work

by Rachel Nabors

A perfect primer on animation theory and the various different tools (CSS, SVG, Canvas) that make up modern web animation.

Transitional Interfaces

by Pasquale D’Silva

An introduction to some basic animation principles plus examples on how to improve UX  by using transitions and animations (written in Pasquale’s unique style).

A New Mobile UX Design Material

by Rachel Hinman

A look at the 12 basic principles of animation (as laid out in The Illusion of Life: Disney Animation, by Frank Thomas and Ollie Johnston) and how they can be applied to mobile design.

Make Your Browser Dance

by Ruth John

Ruth’s 24 Ways article explores how to combine animations and audio using HTML, CSS and JavaScript so that we can VJ in the browser.

Better Navigation Through Proprioception

by Cennydd Bowles

Cennydd looks at how movement and transitions can help communicate a sense of navigation, without taking up screen space (especially important when designing for smaller devices).

Flashless Animation

by Rachel Nabors

Part of 24 Ways in 2012, Rachel shows us how to create a walk cycle using a background sprite and the CSS animation steps syntax.

How SVG Line Animation Works

by Chris Coyier

An article from CSS-Tricks about animating SVG lines (y’know, like the ones Vox did for those awesome Playstation 4 and Xbox One reviews).

Books

A Pocket Guide to CSS Animations

by Val Head

Part of the Five Simple Steps Pocket Guide series, this little book introduces you to CSS Animations with examples that help explain some of the less obvious concepts that make up the CSS Animation markup.

The Animator’s Survival Kit

by Richard Williams

This ‘manual’, written by the animation director of Who Framed Roger Rabbit, was the best book I ever bought when studying animation at University, and it still comes in handy today. Buy it.

Courses

CSS: Animations

by Val Head

A introduction to CSS animations from Lynda.com. Goes together perfectly with Val’s Pocket Guide to CSS Animations.

Animation Story Telling with HTML5 and CSS3

by Rachel Nabors

Rachel covers CSS animations, transitions, audio and more, plus a short history of animation with this course from Frontend Masters.

All The Right Moves

by Val Head

A series of short screencasts on Vimeo covering some of the more quirky parts of CSS animation in more detail.

Conference Talks

Designing with Animation

by Pasquale D’Silva

A video of Pasquale’s talk at Web Directions South.

Sync HTML5 Audio with CSS3 Animation

by Tim Pietrusky

A short (5 minute) video from dotJS 2013 where Tim talks us through syncing HTML audio and CSS animation using some JavaScript.

Tools

Keyframer

by Alex Bergin

Keyframer is a useful browser based tool that helps you visualise your animation keyframes, allowing you to place them on a horizontal timeline. You can then edit each keyframe as the animation preview loops constantly. (via @Port80Events)

Animate.css

by Dan Eden

A library of pre-built CSS animations that you can preview in the browser, or fork on Github to use on your own projects.

Ceaser

by Matthew Lein

A (touch device friendly) tool for creating and previewing custom easing (cubic-bezier) effects for your CSS transitions and animations.

Cubic-bezier.com

by Lea Verou

Another tool for creating custom cubic-beziers. This one lets you play your transition side-by-side with a default one, for comparison.

CSSynth

by Bennett Feely

Play around with particle-like effects and transitions, using a grid of shapes. Useful for generating lots of nth-child markup.

Bounce.js

by Joel Besada

Create some lovely, squashy CSS animations then export the markup. Has a really nice UI too. (via @Port80Events).

Framer

by Koen Bok

Framer is an animation and interaction prototyping tool that is built for designers as an alternative to Quartz Composer, Flash or Keynote. (via Pasquale D’Silva)

Snap.svg

by Snap.svg

A JavaScript SVG library including animation and event handling from Adobe.

Other Resources

The Illusion of Life

by Cento Lodigiani

A beautifully created film, inspired by the 12 basic principles of animation developed by Walt Disney Studios in the 1930s. (via @Cennydd)

Hover States

by Hover Studio

A high quality collection of interesting animation and interaction design examples, complete with screen casts and an email newsletter.

Use Your Interface

by Josh Davey

A useful library (withs tags) of interface patterns that use transitions and animations. (via @TomALloyd)

SIX UX

by SIX UX

A collection of 6 second Vine clips that show off some nice animated interactions.