Dive In: Resources for Web Animation

I’ll admit it—animation is usually left until the very end of my design process. After nearly all of my other design decisions have been made, I’ll look through the coded designs for opportunities to add some “flair.” What I loved about Val Head and Rachel Nabors’ articles last week is that they advocated for a much more meaningful way to use animation. After reading their articles I immediately realized, “Wow, I should start thinking about animation way earlier.”

Prototyping seems like the perfect way to get animation thinking happening sooner. When I’m designing, I usually have some idea of how I might want a menu to slide in or a button to behave, but I will usually shelf those ideas until later. I love Val’s suggestion to create a quick and dirty example of an animation idea in order to have something real to evaluate and iterate on. This is also a great way to communicate your idea to your teammates or clients.

If you lack the tools to be able to prototype your ideas, Val is giving a CSS Animation workshop in New York on March 7th. She also has an online course on CSS Animations for those of you that can’t make it in person. If diving in and experimenting is more your thing, Magic is a CSS3 framework with a ton of animation examples. Finally, for a jolt of inspiration check out Use Your Interface, “a growing library of transitional interface and interaction design patterns to help you inspire and communicate your UI ideas with people.”

Aside from a motion graphics class in college, I don’t have much background in animation theory. If you’re like me and want to take Rachel’s advice about starting with the fundamentals, then I recommend checking out The Animator’s Survival Kit by Richard Williams. Drawn to Life by Walt Stanchfield and Cartoon Animation by Preston Blair are also classics. For a shorter read, “Animation: From Cartoons to the User Interface,” is a Stanford paper by Bay-Wei Chang and David Ungar which explains how cartoon animation principles can be applied to user interfaces. Rachel also has a ton of additional resources in her article that I’m eager to check out, and she’s expanded on her article in a recent screencast. If all of that isn’t enough for you, Benjy Stanton has assembled a great list of web animation resources and further reading.

I can’t wait to start incorporating animation thinking earlier in my process. If you have additional resources to share or are also looking to bolster your animation knowledge, I’d love to hear from you.