Web/UI animation pro. Author of Designing Interface Animation. Curates the uianimationnewsletter.com, co-hosts @motionmeaning.
Jan 185 min read
What does Disney know about interface animation anyway?
Disney’s 12 classic principles of animation from Ollie Johnston and Frank Thomas’ The Illusion of Life are mentioned in nearly every article about interface animation. Often without going into much depth as to why these are something web designer should care about, which leads to some doubt as to whether they’re actually of any use to us.
We’re not animating dancing brooms in feature films. We’re designing interfaces for apps and websites. Do these principles really have anything at all to do with interface animation?
The answer is yes. They really do.
Even when our animations are primarily there for UX purposes. (As they should be, see here and here).
Even when our animations are only a fraction of a second long.
Focusing on animation’s purpose doesn’t cancel out the value of classic animation principles.
The 12 classic principles break down how to communicate with animation and how to control what it conveys to viewers. Timing and Spacing explain how to express weight, emotion, causality, and more with our animation choices. Follow-through and Anticipation explain how energy can be implied across movements. Squash and Stretch shows how manipulating the shape of an object can suggest traits about the material it’s made of. Using these concepts well can be the difference between animation that’s effective and animation that merely distracts.
Designing animation is a lot like designing typography. Type can just be there for the utility of reading and nothing more. Or it can be taken further and intentionally designed; selecting typefaces that share a common voice with the content. The same goes for interface animation. You can include animation purely for its intended UX purpose and leave it at that. Or you can take it further and intentionally shape it to work in harmony with the rest of the design. Designing this level of detail is what separates great design from average design, both in typography and animation.
Just like using different typefaces for a headline can affect the reading experience:
An appreciation for what can be expressed with easing is a big benefit of understanding the 12 classic principles. The principles of Timing, Spacing, Follow-through, Anticipation, and Exaggeration can all potentially be expressed with the easing you choose for an animation. These are factors that affect the way that weight, energy, and emotion of your animation are perceived; all potentially wrapped up in one property choice. This is why taking advantage of custom easing options (like cubic-bezier functions in CSS) is so important. Limiting yourself to only “ease-in” and “ease-out” arbitrarily limits your animation’s capacity for expression.
We refer to these Disney greats not because they tell us how to make cute characters dance around, but because they teach us how to have finite control over movement and expression in animation.
They give us a vocabulary for discussing animation
The 12 principles gives us specific terms and concepts to discuss animation in a useful way. This is something that is especially lacking in web design since the web was a purely static medium for so long. We’ve never had to discuss animation in detail at all until recently.
Acting out an animation or prototyping animation are both effective ways to show animation ideas. But at some point you’re also going to have to discuss these ideas with words in writing or conversation. Without a shared vocabulary around animation, this can be difficult and time consuming.
Statements like “that animation needs to pop more” are difficult to discuss or act upon in any meaningful way. It could mean almost anything, and everyone in the room likely has a different picture in their head of what it means. A lot of additional explanation will be necessary to get everyone on the same page.
On the other hand, Statements like “The follow-through on that animation needs to be toned down.” are a lot more specific and actionable. Everyone on your team that’s familiar with the definition of follow-through knows exactly which aspect of the animation is being discussed.
Knowing the 12 principles gives your team the foundation of a shared and specific vocabulary to make design decisions faster. You’ll need to develop your shared vocabulary beyond just what’s in the 12 principles to discuss all the aspects of interface animation, of course. But building off of their existing terminology saves you the time of coming up with something entirely from scratch.
But we have to take the classic principles one step further
As much as the 12 classic principles of animation can teach us, it’s important to remember that these principles were written for a different time and a different medium. Interface animation focuses on having purpose and utility more than storytelling. Our job is to learn from these concepts and expand upon them for the context of the modern web.
Not all of the 12 principles apply equally to work on the web, or to modern tools. Some matter more than others for animating interfaces. A solid understanding of Timing, Follow-through, Appeal, Anticipation and Squash and Stretch will be useful in web design, for example. While concepts like Staging and Solid Drawing, however, aren’t as useful.
We have different goals and use different tools than those Disney animators, so don’t take all these principles at face value. It’s good to have opinions on which classic principles matter most to you. Of course, that requires experimenting with the principles and trying them out for yourself. Which is something I encourage all web designers and developers to do.
More experience with the classic concepts of animation — those in the 12 principles and beyond — will help you design and build better web animation. The more you know about what has come before, the better prepared you are for building on it to make something new.
It’s a lot like typography. Thoughtfully chosen and well designed type becomes invisible to the reader, yet still communicates so much. We put effort into choosing typefaces because we know it will make a difference. The same goes for animation.
There are two qualities all great interface animations have no matter their context:
They have purpose. A lot of thought is put into why the animation is included in the design. Whether it’s there to orient the user, show relationships, give feedback, or demonstrate. The reason for these animations being there is known. The designer knows exactly what it is this motion is meant to communicate or tie together.
They have style. Serious style. The look and feel of the movement is fitting, classy, and done with restraint. If the motion was too flashy or too slow, they’d stick out like a sore thumb no matter how well placed they were.
Great interface animation has both purpose and style.
Like much of design it takes time, patience, and a little bit of trusting your gut to get animations just right. We don’t always hit the mark perfectly, but when we do, we’re rewarded with that wonderful “ah ha!” moment where everything falls into place.
We are a comprehensive team of designers specializing in mobile/web interfaces, UI/UX, icons, logos and branding. We don’t look for solutions. We create them.
3 days ago4 min read
Case Study: SqueezeOutSwitch. Animation in Code.
UI animation has been the subject of hot debates for a long time. Designers work over the sophisticated animations to make interfaces attractive, original and functional while developers often support the idea that slick and complex animation takes more effort in the process of development than necessary.
As you know from our previous posts devoted to the issues of interface animation, here in Tubik we support the position that wisely used animation is the powerful and multi-functional tool enhancing user experience. We checked that on numerous design projects of diverse purposes. Our complex motion design concepts have been used by developers who like challenges and want to present high-level skills in coding.
Broadening our professional horizons, we also started sharing our design concepts on GitHub, to show how design, even quite complex and specific, can be brought to life with code. Today we will look at more detail at SqueezeOut Switch animation of the interface interaction.
The design concept Switch Control Animation was presented on Dribbble featuring animated switch control that can be used for accepting or declining the changes on any settings screen. The main motion design style the designer aimed at was adding some gum effect when the control is switched on and off. And this sort of design details can become a bit of challenge for developers.
The animation in code representation is made of two parts.
The first part works like that: when user makes a tap on the screen, the circle has to move to the opposite side until it is covered by the baffler. Then animation slightly slows down, the circle changes its appearance, goes up to final point and features bouncing. The baffler also shows the animated pulsing with the circle. The oscillations decay.
The second variant takes place when user tries to move the circle manually, like pressing it and pulls to the needed side and then can release. While the user pulls the circle, it changes its position within acceptable range, up to maximum stretching of the baffler. The baffler stretches only to one side in that case. If the user releases the circle not taking him to the middle of the switcher, it gets back to its initial position and pulses. The baffler will just get back to the initial point. If the user takes the circle further than the middle of the switch, it goes to the opposite side, both the circle and baffler pulsing, and the circle changing its image.
Animation of the circle movement doesn’t create any problems. This is the standard task which can be solved with UIView animation and CASpringAnimation. However, animation of the baffler is more challenging.
In case when animation is done with Core Animation, setting the initial and final path, then the arc performance is unpredictable. In addition, the form of animation can be inappropriate and the problems with color change can raise.
In animation, the change should be done discretely. When should it be done? If you do it in advance, then the good point is when path is at its initial stage, which means it features the straight line in the middle of switch. So, you have to create an array with the set of paths and colors and place it into CAKeyframeAnimation. The approach gives the working outcome, still the code will look messy and illegible. Moreover, the circle will need to be moved manually for synchronization.
In this case we can use CADisplayLink (timer of screen redrawing) and manipulate with presentationLayer (the copy of the layer which is visible on the screen at the moment). In the method launching CADisplayLink, we will change the path for the buffler. The points which form this path depend on the position of the circle in the switcher. The position of the circle is animated with UIView animation. Therefore, animation with UIView will smoothly change the bearings of the circle layer, while we are changing the path of the buffler on the basis of those bearings.
The path for the buffler feature two UIBeziePaths.
The first one goes from the point 1 to the middle of the circle edge at point 3. Control point for this curve is point 2, it proportionally depends on how far the circle moved out. The second line goes from point 3 to point 5 and its control point is point 4. In this way we can get the line of the buffler edge smoother.
The method of forming path for the particular extreme point
The method of animation on tap
For reaction on pan we added UIPanGestureRecognizer. Here is the method that processes it:
I discovered the above gif while browsing Dribbble. You can interact with the component by either tapping on a feeling or by dragging the colored emoji horizontally. The facial expression animates as well as the caption below an emoji.
This component was mainly built using the Animated API and PanResponder. After finishing the interactions, the last thing missing was the animation of the face. However, I had no idea how to realize that. The video on the left shows the point, where I had no clue, how to go on.
In the end I decided to go with an alternative animation: Instead of animating the eyes and the mouth, I’m animating the whole face by fading from one state to the other. I know, it’s not as sexy as the original one, but it’s something.
Check out the video below, to see it in action:
You can find all the code on Github and do whatever you want with this!
Hey! My name is Yousef and I’m doing UI challenges in React Native. The idea is to recreate UI designs from Dribbble screenshots and popular apps using React Native. If you like it, please hit the ❤️ button and follow me for more challenges!
Chris is a 20+ year UX veteran, author, and public speaker. He delights in finding truffles in oubliettes.
Apr 27, 20155 min read
One free interaction
“One free interaction” is a prospective design pattern that gives software and hardware a more humane feel. It exists outside of task flows and the concept of users as task-doers. Instead it sits in the “in between” spaces, suiting users as fidgeters, communicators, and people who play with things.
When I first got my iPhone, I spent time opening up all the applications and playing around. I was keeping an eye open for what new facets of the touchscreen interaction design were fun and useful. When using the Safari web browser, I noticed the funny stretchy-edge pages. Meaning, when you use your finger to scroll above the top of a page or below the bottom of a page, it pulls away from the edge of the browser, revealing a small blank area that sits “behind” the page. When you lift your finger up, the page snaps back into place. It’s kind of hard to describe, so this little video should help.
It was pretty cool, since it provided some visual confirmation of the edges of the page. But honestly I thought it was just a coding oversight. Then I saw it again in the text message page. And again in email menus, and the emails themselves. Nope, I realized, it’s baked into the OS.
I put the feature out of my mind until I found myself fiddling with it. Mulling over an email, or waiting for a text response from someone, I’d sit and idly flick the pages away from the edge just to watch them snap back. Flick-snap. Flick-snap. It was so satisfying, even if it was sort of useless. (At the time of this original posting — Jan 2009 — it was not tied to functions like reload or, as in Twitter, switch accounts, as it is today.)
Then I started seeing this same pattern in other things.
In the iPhone word-finder application Quordy you’re meant to drag your finger through a grid of letters to create words. But tapping single letters also sets off a little animation of the tapped letter flying into the corner. Since there is no consequence to doing this, it becomes something to do as you look for new words.
I noticed two friends who use their mouse to repeatedly select and deselect text in web browsers as they read pages online. This is absolutely crazymaking for onlookers, but really satisfying for them.
A couple I know so dearly love the “purr” error sound in the MacOS X, that they look for ways to get it to sound without interrupting their work. They found a key command that can only execute when something’s selected on the desktop, so occasionally they’ll deselect everything and play it for one other a couple of times. It’s like saying “I love you” for each other across the room in 16Bit/44Khz.
This pattern can be seen in industrial design as well. I’ve heard that owners of Blackberries adore just fiddling with the pearl trackball, especially when the device is off.
When I talk to each person about these behaviors, there’s not a lot of conscious decision-making going on here. The web-page-highlighters aren’t intending anything when they do this, it’s just something they enjoy doing. But even though these behaviors don’t help move any tasks or goals along, they’re satisfying. And because they provide a release for nervous energy and/or let us be expressive, they become an extension of ourselves to which we have some small emotional connection.
This emotional connection is desirable from both a branding and an interaction design perspective, so we should make use of this type of interaction. I’m giving them a name so we can talk about them: free interactions. They’re “free” because they have no consequences. They affect only the interface and don’t touch content. It’s interactive because there is some small, quick cause and effect.
As we’re trying to understand what makes them successful, there are some other important aspects to these behaviors worth noting. Most of them are “natural,” in the sense that they feel more like the natural world than the computer world. The snapback pages feel like they’s connected by rubber bands. The MacOS X “purr” sounds kind of like a cute animal. The pearl is even called a pearl and feels like a little stone under your thumb. Granted, clearly there’s no natural analogue to text selection and deselection, but you see the pattern. When these things have a natural feel they have a pleasant, emotional…humane feeling.
Another aspect is that the feedback loop is very quick. Purr.aiff plays at 0.5 seconds, and that seems like the longest duration before it would become too weighty to keep doing over and over. The snapback, in comparison, feels like it takes about a quarter second, and the Quordy letter animation takes place in even shorter amounts of time.
Free interactions are rare enough right now that I couldn’t find an example in which there were more than one. But I imagine that if there is more than one, it would begin to feel a little hokey and detract from the actual utility of the system. (OK, maybe KidPix has overdone it, but it’s right for their audience.) Because of this minimalist constraint, let’s ultimately call the pattern one free interaction.
Call to action
Since we want our designs to be humane and, presuming they fulfill their utilitarian purposes well, emotionally satisfying, I suggest that designers begin to include one free interaction in their designs to enable the channeling of energy and simple expression. Design this interaction such that:
It’s “free,” i.e. having no significance to the task or content
It’s discoverable in ordinary use of the product
It’s quick and repeatable (Less than half a second.)
This is a prospective pattern, and one that I’d love to hear if others have encountered or implemented. Where else in the world have you seen this at play?