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.

  • By The fine folks at A List Apart
  • Posted in Uncategorized
  • Tagged Cartoon Animation, Preston Blair, Richard Williams, Walt Stanchfield
  • Translator

  • Recent Articles

    • Samsung Galaxy S6 to sport 2K display, 64-bit processor
    • Nintendo’s Anti-Consumer AC Adapter Problem
    • HTC sends out MWC invites – new HTC One M9 coming soon?
    • Windows Phone 10 leaks shows new homescreen
    • Sharp Mini Phablet Hits The FCC
    • LG-H810A Could Be AT&T’s LG G4
    • Uber Driver Hits Police Car, Pot Found In Glove Compartment
    • Nikon Booth at CES 2015
    • Smallest Laser In The World Created
    • WeatherDan – Tracking the details of the weather using Zip Code
    • This Weekend in the App Store — the best free apps, new apps and app updates
    • Robot To Work At Fukushima Disaster Scene
    • Xiaomi Buys 3% Of Chinese Games And Software Giant Kingsoft For $68M
    • French Websites Get Attacked After Warnings Issued
    • MTV To Air In Black And White
    • Witness Jessica Williams Discuss Alabama’s Bizarre Abortion Law With A “Fetal Attorney” – “Fetal attorney” is what it sounds like
    • PP Jailbreak iOS 8.1.2 For Mac OS X Released, Here’s How To Use It [Tutorial]
    • The Week in Review: news and features you don’t want to miss
    • Doctors Saved A 4-Year-Old Girl With Help From A 3D-Printed Model Heart – #Feels
    • Immigrant Founders Need Policy Reform To Keep Creating Tech Jobs