Slides from my talk about animation and the future of UX are on SlideShare. They don’t have the videos because Keynote. Darn!

Articles

• Web Animation at Work—an article I wrote for A List Apart about why animation is important to companies and where to start honing one’s skills.
• Five Ways to Animate Responsibly—some best practices you can and should follow before animating all the things :)
• State of the Animation 2014—my run-down on Smashing Mag of where web animation’s been and where it’s going.
• Animation Support in a User Interface Toolkit: Flexible, Robust, and Reusable Abstractions—an article from 1993 underscoring the improvements animations can have on a user’s mastery of an operating system.
• A New Mobile UX Design Material—goes into depth with examples of the 12 Principles of Studio Animation as they apply to mobile design.
• UI Animation and UX: A Not-So-Secret Friendship—a sister A List Apart article by Val Head focusing more on the nuts and bolts of animating user interfaces.
• Provide meaning with motion—Why motion design is now a required skill for designers.
• Everything You Need to Know About the CSS will-change Property—an article by Sara Soueidan that breaks down how animations tax the CPU and how the will-change property can and cannot help you optimize them.
• Optimising for 60 FPS Everywhere—covers the basics of layer composition an optimising away different performance bottlenecks.

Books

• Animation books I recommend to web developers and designers
• Animation Books I’ve read on Goodreads

Screencasts

• The Infinite Canvas Screencast—My screencast that brings together code, storytelling, animation and design in one place. Interviews with people from many fields, sure to entertain and inspire!
• All the Right Moves—Val Head’s how-to screencasts on CSS animations and the like.

Recorded Talks

• Animation Studio Power Techniques with CSS3—Secrets from the animation industry.
• Animated Music Videos with HTML5 and CSS3—A fun introduction to CSS animations with the help of a rocking cat.

Slides

• Interface Animations

Courses

• Animation and Storytelling with HTML5 and CSS3—My Frontend Masters Course showing how to use and combine CSS animations, JavaScript and HTML5 audio.

Examples of animation in action

• Use Your Interface—A tumblr of animated gifs of tiny user interface animations.
• Captivate Co—A curated collection of iOS UI animation patterns.
• Dribbble—If you know how to search ;)

People on Twitter

• Me!—Former cartoonist turned interaction developer and web animation evangelist!
• Val Head—Designer and CSS animations advocate.
• Sara Soueidan—Sara completes the Web Animation Advocacy Trifecta with her focus on SVG animations.
• Mark Geyer—Works in-house on design and prototyping and has field experience integrating animation with that process.
• Vicki Murley—Former Safari evangelist, now author of two interactive iBooks on CSS animation and transforms.
• Pasquale D’Silva—Not a web animator, but writes about using animation in his app development.
• Ricardo Cabello—Has been at this since Flash. Humble and soft spoken, he’s a best kept secret who makes incredible things.

CSS Animation Effects Libraries

• Effekt.css

Performance Tools

• CSS Triggers—Far from comprehensive, but a look at what CSS properties trigger reflows and repaints.

Prototyping Tools

• Flinto
• Invision App
• Pixate + Viget’s write up on it

Software

A number of UIs have been created to help people create web-ready animations. I prefer to hand code everything and build my own tools, but others who do not have that luxury will be interested in these:

• Animatron
• Hype
• Google’s Web Designer
• Adobe Edge Animate
• Sencha Animator

Pasquale D’Silva has written about the need for better animation tools. I remain confident that when browser vendors like Mozilla create proper timeline tools, the need for an animation UI will become less pressing and the browser will potentially become a viable animation IDE.