Animation & UX Resources
Are you looking to get started with web animation? Awesome! Here are some of my favourite resources for learning about web animation and designing interface animations.
For a fresh blast of web animation advice, resources and inspiration every week, join The UI Animation Newsletter.
I also teach web animation workshops for events and companies. Email me to set up a web animation workshop for your event.
Learning | Articles | Animation Theory | Galleries | Tools | Performance | Prototyping Software
Learning Web Animation
Online courses, ebooks, and especially educational articles:
CSS Animation on Lynda.com (Updated for 2016!)
Designing Interface Animation (book)
The Pocket Guide to CSS Animation
All The Right Moves Screencast
The Art of UI Animations Slides
Everything you ever needed to know about Easing functions
Google’s Web Fundamentals on Animation
UI Animation Articles
A short list of articles that focus on adding motion with meaning and helpful animation that improves user experience. These are some of my favourite reads on interface animation:
UI Animation and UX: A Not So Secret Friendship
What Are Your Transitions Saying?
Animation: From Cartoons to the User Interface (PDF)
Putting Your UIs in Motion: Slides or Luke W’s notes version
Traditional Animation Theory
Animation has such a rich history. This is my short list of where to get started learning about it:
Illusion of Life Tumblr
A little video and a collection of .gifs about the 12 traditional animation principles that are still relevant in our work today. Based on The Illustion of Life book.
Timing for Animation Book
Yes, an entire book about timing. Lots of good stuff in here!
Galleries
A few of my top choices for finding interface animation inspiration:
Use Your Interface
A library of transitional interface and interaction design patterns.
Six UX
Video snippets of UI animations on screen. Sometimes it gets really shaky, but there is a good variety of exmamples.
Art of The Title
Yeah, I know it’s not UI, but title design can be some great inspiration.
Capptivate
This one focuses on native apps and shows multiple interactions for most apps which is great.
Tools
Velocity.js
A JavaScript prototyping tool for quick animation options. Not the easiest to combine effects, but if you need to get something together fast, this will do the trick.
Bounce.js
A tool for creating and editing complex matrix transform keyframe animations. A million times easier than writing out the matrix transforms yourself!
Easings.net
Cubic-beziers and the Penner easing equations are your friends. This site has the motion graphs, demos, CSS, and JavaScript code all together in one place.
Performance
You don’t need me to tell you that performance is important. Consider this list a crash course on making sure your web animations won’t be holding you back:
CSS Triggers
Helpful performance tips for specific CSS properties. Don’t bother trying to remember which properties cause paints or don’t. Just look it up here!
High Performance Animation
The four CSS properties browsers can animate cheaply plus a primer on what Dev Tools is trying to tell you about your animation performance.
Parallax Done Right
How to do parallax if you must do parallax or if you have a really good reason for doing parallax.
Prototyping Software
After Effects
Some may call it overkill or old school, but here’s the thing – if it works for you, use it! And if you’re curious about using it for UI work, this short tutorial will get you started.
Adobe Edge Animate
Love their timeline metaphors! Love the fact that it keeps us in the browser for appropriate context! But for the love of kittens everywhere, never use the code it spits out in production please.
You might also like:
Hype
Sencha Animator
Looking Ahead
Web animation is still in it’s infancy in the grand scheme of things. There are so many more places for us to go! The Web Animation Spec might just get us there?
Silky Smooth Web Animation (with Web Animation Spec)
Motion Path Module
Motion paths in CSS? That could be pretty darn useful, huh?
The Web Animation API tutorials series
A very helpful series by Dan Wilson on how the Web Animation API works.
The Web Animation API working draft
The official word on what is and isn’t part of the spec for the Web Animation API.
