Web Animation Resources
An old collection of resources about animation on the web. Last reviewed on Monday 5th April 2021.
UI Animation and UX: A Not-So-Secret Friendshipby Val Head
Val’s article includes practical examples on how to us animation to improve UX, with some great CSS demos.
Web Animation at Workby Rachel Nabors
A perfect primer on animation theory and the various different tools (CSS, SVG, Canvas) that make up modern web animation.
Transitional Interfacesby 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).
Make Your Browser Danceby Ruth John
Better Navigation Through Proprioceptionby 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 Animationby 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 Worksby 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).
The Animator’s Survival Kitby 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.
Animation Story Telling with HTML5 and CSS3by 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 Movesby Val Head
A series of short screencasts on Vimeo covering some of the more quirky parts of CSS animation in more detail.
Designing with Animationby Pasquale D’Silva
A video of Pasquale’s talk at Web Directions South.
Sync HTML5 Audio with CSS3 Animationby Tim Pietrusky
Keyframerby 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.cssby 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.
Ceaserby Matthew Lein
A (touch device friendly) tool for creating and previewing custom easing (cubic-bezier) effects for your CSS transitions and animations.
Cubic-bezier.comby 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.
Framerby 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)
The Illusion of Lifeby 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 Statesby Hover Studio
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.