Slides from my talk about animation and the future of UX are on SlideShare. They don’t have the videos because Keynote. Darn!
- 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.
- 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.
- 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-changeproperty can and cannot help you optimize them.
- A New Mobile UX Design Material—goes into depth with examples of the 12 Principles of Studio Animation as they apply to mobile design.
- Optimising for 60 FPS Everywhere—covers the basics of layer composition an optimising away different performance bottlenecks.
- 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.
- 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.
- 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.
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
CSS Animation Effects Libraries
- CSS Triggers—Far from comprehensive, but a look at what CSS properties trigger reflows and repaints.
A number of UIs have been created to help people create animations easier. I prefer to hand code everything and build my own tools, but others who do not have that luxury will be interested in these:
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.