Are the 12 animation principles still relevant in web context?

A lot has changed since Disney animators Frank Thomas and Ollie Johnson defined the house rules of all modern animation in their book Illusions of life. It has been called the bible of animation and “the most complete book about animation ever written”.
Today we consume animations in a completely different way and context than how we used to before the digital revolution. Audience today demand instant response and really differ a lot from steamboat Willie and the 30’s cinematic spectators expectations. Some argue that the animation principles might be outdated and not applicable to modern digital platforms and its users. And is there really a purpose for animations at all in the new media ecosystem?
– It is true that the persona of a web is a lot different from Mickey Mouses and of course we should’nt apply a playful Disney filter on everything we do. But the key importance here is to remember that the main purpose of good animations is to ease the experience for the viewer. Good UX design guides the spectator to see what we want her to see. And this is also exactly what the principles was made to achieve.
To truly explain why motion design is a big part of customer experience, let’s go over the principles and examine them a bit and evaluate their relevance.
Squash and stretch
Squash and stretch is the first and probably the the easiest of the principles to explain. It amplifies an action by stretching it during speed and then squashes it with sudden brakes. This technique is commonly used in animated icons and modal windows. In my opinion this can be applied in more situations than what first comes into your mind.

Anticipation
The second principle is usually depicted with the pitcher slowly pulling his arm back before he throws a ball. Any digital application needs fast responses, then why should we add more anticipation to animations you might ask? But I like to see the anticipation as a mouse-over-effect on a symbol to indicate that an action is waiting after pressing. If you look at it that way not adding an anticipation is leaving the user in an unnecessarily unguided state. Make the hoover indicate exactly what will happen. The opening of a new window or folding out a dropdown is a big difference for the user.

Staging
The third one, Staging, is about setting up the stage and lay out the field in order to get the most out of your animation. This could be straight up design task really but animation can help here. Where is the cursor for example? Let’s assume for a minute that the cursor is at the center of attention for the user. In an eCommerce case, by just making sure that the product beneath the cursor is equipped with a magnifying glass, could definitely fall under the “setting up of the stage” for your animations to follow.
Pose to pose or straight ahead
These are two distinct different ways to draw out your animations and it originates from classic pen and paper animations. “Pose-to-pose” is used when drawing the important phases (keyframes) of the motion first and the “fill in” the transition in between afterwards while “straight-ahead” is the opposite where you start with the first frame followed by the next unknowingly of there your animation ends up. Straight ahead is usually used when for example drawing out a flaming torch.
How is this related to any web design animation? This has actually everything to do with for example app design. You often have different states of a design block. Take a playhead of a video or music player for instance -you most certainly would design an expanded state and a collapsed state. The way you animate between these states is a classic pose-to-pose animation scenario in my opinion. What happens then with the expansion of a card, the full bleed album cover in a collapsed state or the additional information disappearing when minimizing a calendar item back to monthly view? Pose-to-pose keyframes will in that case hel guiding a confused frontend developer.

Follow through animation can basically be considered an extra action that indicates that the animation is following the laws of nature — I’ll explain. A car comes to a halt, but the antenna continues the motion and follows through the movement. This is generally practiced in animated iconography. Though an expanded list might just as well have a bounce of menu items to indicate the weight of the list when it hits the end of the animation. It could be a nice extra touch to text while scrolling too don’t you think?
Slow in and slow out — might not need a further introducing but to say that easing is key to all transitions between states. It’s basically the rule that says “all motions starts soft before picking up pace to then slowing down at the end until it reaches a full stop”. This adds an organic feel to your animations unlike the most practiced linear animations that gives a very robotic and unfriendly feel.
Arc — mimicking nature’s gravity can’t go wrong. In fact every horizontal movement in nature has a gravitational pull to it. By not moving objects straight but rather with an arc gives it a much more friendly impression.

Secondary animation — “An additional animation that supports the main animation”. Not only does Mickey look angry, he also closes his hand to a fist in rage. This is how we often use secondary supporting animations. But animations can support in other ways too.
What happens to a website menu while scrolling or images and blocks surrounding the focus area? Try to foresee what the user wants when she or he is occupied with a different task. If you highlight an object, perhaps pushing other irrelevant content aside a bit or tone it down might assist and add some good user experience at the same time?
Timing, the ninth principle, might be tricky when you don’t control the timeline or pace of the experience. But timing might ease an experience by portioning out content, one item at the time, and make the content populate the viewport one thing at the time instead of showing all information at once. This is very appreciated on information-heavy pages with a lot to take in. Apple among others, have used the scroller as a playhead for their hero-animations in their big releases.
Exaggeration — This is a delicate parameter that defines the tone-of-body language of your web. Too bouncy icons can give a bit of a corny impression but on the other hand a stiff experience may feel a bit unfinished. Experiment with pacing and level of exaggeration to match the profile of your sites persona.
Solid Drawing means to make the silhouette of your graphic element as clear and explanatory as possible with the need of as little details as possible. This makes it easier for the eye to register in a busy world. This goes for animations just as much as for graphic design.
And then to our final principle — Appeal! Making your animations look as appealing as possible is a universal language whether you making Frozen 2 or bennys-video-rentals.com. The creation of “need” starts with appeal.
My conclusion on this topic is that the principles from 1930 are very much relevant today but that we might need to update the definitions a bit and bring them up to a modern version. Good animations are all about selling your vision to the fullest extent. And without a clear animatic body language you risk ending up feeling unpolished and just stiff.
In times when we don’t need anything but want everything this can be the tipping point when you say ”hell yeah” instead of ”I’ll think about it”.
Think about it.

