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.
by Val Head
Val’s article includes practical examples on how to us animation to improve UX, with some great CSS demos.
A perfect primer on animation theory and the various different tools (CSS, SVG, Canvas) that make up modern web animation.
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 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.
by Ruth John
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).
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.
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).
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.
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.
by Val Head
A introduction to CSS animations from Lynda.com. Goes together perfectly with Val’s Pocket Guide to CSS Animations.
Rachel covers CSS animations, transitions, audio and more, plus a short history of animation with this course from Frontend Masters.
by Val Head
A series of short screencasts on Vimeo covering some of the more quirky parts of CSS animation in more detail.
A video of Pasquale’s talk at Web Directions South.
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)
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.
by Matthew Lein
A (touch device friendly) tool for creating and previewing custom easing (cubic-bezier) effects for your CSS transitions and animations.
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.
Play around with particle-like effects and transitions, using a grid of shapes. Useful for generating lots of nth-child markup.
by Joel Besada
Create some lovely, squashy CSS animations then export the markup. Has a really nice UI too. (via @Port80Events).
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)
A beautifully created film, inspired by the 12 basic principles of animation developed by Walt Disney Studios in the 1930s. (via @Cennydd)
by Hover Studio
A high quality collection of interesting animation and interaction design examples, complete with screen casts and an email newsletter.
by Josh Davey
A useful library (withs tags) of interface patterns that use transitions and animations. (via @TomALloyd)
by SIX UX
A collection of 6 second Vine clips that show off some nice animated interactions.