The A List Apart Blog Presents:

Dive In: Resources for Web Animation

Article Continues Below

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.

About the Author

Yesenia Perez-Cruz

Yesenia Perez-Cruz is a design leader, public speaker, and writer based out of Philadelphia, Pennsylvania. Throughout her career, she’s helped countless teams strategize, design, and implement their brand identity and design systems. Currently, she leads a cross-functional team on the Polaris design system team at Shopify. Previously, as Senior Director of Product Design at Vox Media, she led the design system for Vox Media properties, including The Verge, Vox, and Eater.

Yesenia has been a featured speaker at conferences around the world like An Event Apart, Design Matters, and SXSW Interactive on topics like web performance, responsive design, and design systems.

4 Reader Comments

  1. Animation is not easy, its a job where your creativity is being tested. Now a days every brand and product require some animated videos to promote and give awareness to targeted audience about it.

    Same way responsive web design require crucial coding to maintain its uniqueness in the global market where every buddy is just using wordpress themes to attract people.

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA