I have a terrible habit of needing to put things in categories all the time. Usually this is just a fun trick to annoy family and friends, but sometimes this habit is actually helpful. And this is one of those times! So, a post is in order in case you find it helpful too.
Editing is very important when it comes to design. What you leave out can be just as important (or more!) as what you leave in. The same goes for animation, of course! When it comes to animating on the web, thinking of things in terms of these two categories can be a huge help. I like to think of specific animation tasks as either being Animation for UI or Animation for Experience. (Capitalization my own for making them seem all sorts of official.) This helps to define the goal of the animation and gives you something nicely concrete to judge it by in the end.
Animation for UI
When you’re animating things that are interactive — buttons, scrolling behaviours, divs that open or close — you main goal is creating a conversation. You want to make your app or site feel like it’s responding to what it’s being asked to do. The main goal for animations in this category is to create something that feels right.
Animation for Experience
Generally this type of animation is more linear and not something that can be interacted with. It may be an animation to create a certain mood or tell a story. Think things like the animation on androidify, or the floaty scrolling feel on activate drinks. The important thing here is knowing what that story or message is. The kinds of questions you need to be able to answer are “What is the message?” and “Are we communicating it effectively?”.
Both these types of animation can be challenging for different reasons. And their goals are very different. Deciding which one you’re working with from the outset makes things much easier when it comes to evaluating the end result and for the all important editing decisions along the way. Like, what should or shouldn’t happen, or what should flat out get ditched.
I just wrote a whole bunch of paragraphs about this, but the thing is, once you have it in your head, it only takes a minute to decide which one you’re doing and run with it. Helpful and easy. Not bad!
