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.

A classic dribbble comment

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.

Mushy

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.


Improved, with controlled spring timing.

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.
come on…

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.

Mushy hamburger Icon in context

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.

In context. Sorry about Medium’s gif compression…

beware of optical toil

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!

Directing the eye to follow fast action. — The Animator’s Survival Kit, Richard Williams

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.


Smeared
Sculpting a curve

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.

Impossible Smear Frames carry the eye across fast movement. Via John Kricfalusi

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!

http://www.navone.org/HTML/Tutorial_Splines2_2.htm

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.

Stepped / Blocked https://framer.cloud/aAdpl/
Ease In https://framer.cloud/vKGrR
Ease In & Out https://framer.cloud/tfOhN
Spring Simulated https://framer.cloud/deNRR
Circular motion can be described with sin & cosine functions per dimension https://framer.cloud/cTAKX
Custom Cubic Bezier Curve https://framer.cloud/lWHuB
Multiple, Layered Dimensions https://framer.cloud/jBPYO
We can reduce complex motion into more manageable dimensions, if we work with animation “layers”

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



Implementing Anticipation & Overshoots:




Transitional & Spatial Interfaces:

I wrote these!



Game Feel:

Some ideas to help consider tactile feeling.

https://amzn.to/2rno2bV


The Animator’s Survival Kit:

This is the Bible for animators. A must have.

https://amzn.to/2w8NrM0


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.

You can use LightBox for FREE!

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.