Web Animation Resources

An old collection of resources about animation on the web. Last reviewed on Monday 5th April 2021.

Articles

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

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

Web Animation at Work

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

Transitional Interfaces

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).

Make Your Browser Dance

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

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

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

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

The Animator’s Survival Kit

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

Animation Story Telling with HTML5 and CSS3

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

All The Right Moves

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

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

Sync HTML5 Audio with CSS3 Animation

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

Tools

Keyframer

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

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

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

Cubic-bezier.com

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

Framer

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

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

Other Resources

The Illusion of Life

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

Hover States

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

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