Sculpting Software Animation
Designing animation is sculpting time. Timing is critical. If you don’t consider animation timing, you’re not designing animation.
Animation is visual music. Skilled animators employ rhythm, timing, tempo, composition, texture and dynamics.
The year is 2018, interface design tools are finally incorporating animation, but many are missing the mark. They’re naively bolting on animation, instead of giving users handles to control animation timing. Consequently, there’s now a landscape of software tools promoting mushy animation.
There’s a wealth of knowledge embedded in classical animation. We don’t need to reinvent the wheel.
Triggered by motion
You first sit down at a movie theatre to watch a flick, and you probably notice the exit signs, the edge of the screen, the heads of other patrons in your view. If the movie doesn’t suck, everything stationary fades away, and you feel enveloped in the picture. That is, until some jackass looks at their Instagram notifications in your peripheral vision, and you’re whisked back into reality.
We typically notice when things move, and stop noticing them when they’re still.
Motion holds our attention, so it’s worth considering how we direct it.
Optical Toil
Learning that “Disney’s 12 principles of animation” exists is not enough. That’s like a designer discovering that design is how it works™️ and calling it a day.
Inexperienced Interface Animators tend to over-animate everything. This is conflated with the pursuit of ‘delight’. They maintain a preciousness around the keyframes they placed, forgetting it will grow tired on the eye. There’s a false assumption the viewer is sitting around with baited breath, looking for hard work. This is reinforced by communities like dribbble, where users poop their pants with excitement when they see animation, because they’ve never seen it before. Truthfully, the best animation feels invisible.
Here’s a classic thing we see in interface work today: The heavy-handed use of springs.
The oscillating interface element holds our attention for no reason. Our eyes are coaxed into focusing on it, because it takes too long to peter out. There’s suspense, and we’re hungry for the end position to be resolved.
Our element feels like it has intent if we reduce the amount of overshoot oscillations. It’s succinct, but still cushioned with a single, intentional overshoot. This can be achieved by dialing in springs, parametric keyframes, or hand-timing. Ultimately, how it feels is what matters most.
Let’s talk about morphing stuff
A play button turns into a hamburger, then into a close button, then it turns into a duck.
Another tasteless interface trope ... behold, the overzealous hamburger menu. Even if you did it without a spring, it’s loud. We don’t need to see a literal, attention grabbing transition to perceive a state change. You don’t have to morph everything into everything.
Let’s see it in context. Tune into where your eyes are looking. Do you notice the icon flapping around long after the broader transition is complete? What’s most important, is the larger state change, triggered by the button. Over-animated nonsense in the hamburger icon splits your attention here.
A more to-the-point approach, is to not morph the icon at all. Instead, we can focus on using subtle animation affordances to communicate interaction. It’s not about catching the eye. It’s about directing it. This button features a depression, and snappy spring back, with a heavily dampened ease, to re-enforce the feeling of pushing a button.
It’s helpful to think about how you lead the eye across the screen. Think about your eyeballs swiveling in their sockets, darting around, accelerating, decelerating. You’re leading the eye when you animate. Where are you adding accents? Where should the eye settle? More tracking requires more physical and mental commitment. Is it worth optical fatigue to add some quirky offset animation? There’s nuance to balance; an economy of motion.
Formula vs feeling
Determine these for yourself. Don’t start with them. I’m talking about the prescribed, stiff, black & white stuff like IBM & Google Formulas. Be skeptical.
Don’t trust the numbers, trust your eyes and feelings first. You can bend the rules of reality. Motion is an illusion, and you get to be the magician.
Consider the motivation & intent of each element you choreograph. Literal isn’t always better. Animation is a medium where the impossible is appropriate. It’s right when it feels right.
Take these examples compared side by side. They’re both doing the same thing, but with different timing.
The example on the left is too literal . A view presenting itself onto screen doesn’t have to start from 0% scale, and animate all the way up to 100% scale to imply it spawning into space.
You can experience a punchier version by showing the result, and the wisps of time slightly before. All we need to do is carry the eye. On the right, we start the scale at 90%, approaching 100% pretty quickly. We feel the scale, without having to sit through watching every value between 0–100. Nobody’s got time for that shit!
Let’s experiment with a more abstract example. Let’s move a shape across the screen:
A linear, robotic tween. Cold right?
Now, let’s get to the result, by blowing through most of the action faster, but using strong cushioning (easing) for a nice recovery.
What if we push it further? Let’s sculpt the curve some more. Ease in and out. Strong acceleration, spending more frames settling. If the action is too fast, we can lead the eye with an elongated “smear” frame. Perhaps a little bit of overshoot to sand it down a little bit.
Seeing time with graphs
Seasoned animators perceive time with nuance. The eye needs to be trained to see & feel timing. Though this ability can take years to develop, it’s still possible to dissect timing, thanks to computers. THANKS COMPUTERS!
Interpolated Computer Animation often employs the concept of a Graph Editor, to let you sculpt time. While the rats nest of curves can be intimidating initially, it’s simple at its core. Graphs merely describe a value changing over time. The value, is attached to attributes (e.g. scale, position, rotation, color, bendy-ness, shininess, roughness).
Motionscope
When we manipulate the shape of these graphs, we’re designing time. Using MotionScope (our in-house tool at Thinko), let’s take a look at how timing & spacing correlates to graphs. It’s like a console for an engineer, or a histogram for a photographer.
A benefit of using a scope is the ability to observe motion in raw dimensions. We can debug animation issues by focusing on one “layer” of animation at a time.
A RESOURCE DUMP!!!
There’s a mountain to learn, but luckily other animators have written boatloads of great information. Here are some valuable concepts to reference:
Moving holds:
A method for selling weight, and keeping forms alive http://www.keithlango.com/tutorials/march05/movingHold.htm
Antics:
A contrasting wind up before a primary movement.
Implementing Anticipation & Overshoots:
Spline Hygiene:
Pixar’s Victor Navone talks about untangling Function Curves.
Transitional & Spatial Interfaces:
I wrote these!
The Art of Interpolation:
GREAT talk by my friend Marcus Eckert.
http://push-conference.com/news/getting-from-a-to-b-the-art-of-interpolation-by-marcus-eckert/
How to Lerp like a pro:
Implementing interpolation
https://chicounity3d.wordpress.com/2014/05/23/how-to-lerp-like-a-pro/
Practice
Reading theory is one thing, but implementing these ideas is a different game. It‘s helpful to sketch around with and without code.
To experiment without code — Practice manual animation to get a sense of timing. Animate a ball across the screen without using computer in-betweens. Draw every in-between frame yourself. It’s not hard. Just get a brush tool, make it the size of a ball, and experiment with timing and spacing! Once you learn to feel timing, your work will improve drastically.
Anyhoo, that’s it for now.
Questions?
pasquale@thinko.com / @pasql on twitter
Thanks for reading & watching ✨
Special thanks to Jacob Bijani for technical contributions.
