The 12 Principles of Animation - Episode 1

 Hello there!

Welcome.

Generally, I do not like to post on social media. But I will make an exception and effort for this course because I finally have an idea for the blog which also works as a challenge for me to step out of my comfort zone and procrastination habits to try and produce more content on a faster pace.  

My blog will be about animation - or the 12 principles of animation to be more precise. One of the main reasons why I applied to TAMK was to properly learn animation as a near-amateur. And what better way to get a little head-start over the introduction course (while simultaneously dying of waiting for it to begin) than making this blog about one of my greatest artistic passions. This is also a convenient way to have ideas ready for all but two of the minimum blogs required for this blog task, even though I might still post something else here as well. 

Basically, I will be covering each principle in a single post so that this series will span 12 blog posts altogether. As an amateur to animating myself, I will be learning the principles with the help of four videos and writing about what I've learned. Here are links to the four videos - my mentors if you will - that I will use as my research material for the blogs to come. 

The 12 Principles of Animation with Emanuele Colombo

Disney's 12 Principles of Animation [Full Series]

12 Principles of Animation: The Complete Series

12 Principles of Animation (Official Full Series)

A bit about the 12 Principles of Animation

The 12 principles of animation were first introduced by two Disney animators, Frank Thomas and Ollie Johnston in their book "Disney Animation: The Illusion of Life" (1981). In the book, they present the research and analysis that they've garnered from analysing the work of professionals. From this research they compiled the 12 principles of animation, which can be applied to character, text and logo animation as well as user interface design.

Now I haven't read the book, but from what I've gathered, anyone who's interested in animation should try to someday get their hands on a copy of this book - sounds like a good read! 

Anyways.

Without further ado, let us begin with...

The First Principle - Squash and Stretch

My first bouncing ball made in 2019

The principle of squash and stretch is arguably one of the most important principles. This principle sees the subject of animation be either: 

SQUASHED: squished, compressed or pushed down by something, flattening its mass

STRETCHED: pulled, expanded or stretched, elongating its mass.

Utilising this principle correctly will give the animation an illusion of and emphasize the subject's:

1- weight and volume: stiff and heavy objects don't change shape when they fall as opposed to rubbery and light objects. 

2- elasticity and fluidity: similar to the previous point, a tennis ball and bowling ball have different reactions when falling and hitting the ground. 

3- speed and momentum: subjects moving at great speed tend to subtly change shape. This is especially evident with a ball being thrown or hit or cats running.   

4- exaggeration and dynamics: the more squash and stretch, the bubblier and dynamic the animation. However, be careful with its use as the amount of squash and stretch determines the object's mass and size. 

Challenges:

The squash and stretch might sound easy to execute, but like all things animation, is anything but. Here are some challenges that you might face when animating squash and stretch:

Keeping the proportions consistent

- When the subject changes shape due to squash and stretch, it can be easy to forget its original shape while animating. Especially with animated characters, the ever-changing proportions of a character can be immersion breaking and confusing for fan artists - or even the artists working on the project. This is why unintentionally inconsistent proportions can make the animation look exaggerated and unnatural.

- In order to avoid inconsistent proportions, a general rule of thumb is to animate the subject narrower when its elongated and wider when its flattened. Occasionally checking the first frame for reference for the correct size as well as playing the animation as a whole helped me keep the proportions somewhat consistent in my animations at the end of this blog.  

Overdoing/underdoing squash and stretch

- The principle of squash and stretch is meant to emphasize speed, weight and momentum. When this is overdone, it naturally loses emphasis on these factors. It can also look like the subject has completely changed shape if its constantly too squashed or stretched in a manner it wasn't before. This is why squash and stretch should only be used in key moments, such as on impact with a surface. 

- A great example of underdoing squash and stretch is this animation by me in 2020, where I was clearly more preoccupied with creating the flashy effects rather than the animation itself. Because the ball moves on an even pace and is only a bit squashed on impact, the ball seems very slow, heavy and/or solid - and does not compliment the gravitas of the effects at all.  

My second bouncing ball made in 2020

Practise exercises:

For this principle, I created two little animations as practise using FireAlpaca which is a free digital animation and illustration software. First, I decided to animate the classic bouncing ball.

FPS: 24

Frames: 40

The bouncing ball is a simple animation that is rather easy and fast to make - although not for a perfectionist such as me. Even then, this took me around 2 hours to make as I wanted to add some flare to the animation with the shadows. 

Here are some tips and discoveries I made while animating this:

- For an object moving along a single path, the shadow on the ground must always be at the same height. At first, I animated the casting shadow of the ball very small when approaching the right side of the canvas. I soon noticed that the animation looked as if the ball is bouncing away from the screen (in my case towards the top right corner) because the smaller shadows were higher compared to the ones in earlier frames. 

- Start animating by drawing the key frames first: the starting point of the ball, first impact, second impact and so on. This way you know where you're going with the animation, you'll be able to pay attention to timing and won't get stuck with the in-betweens.  

Secondly...

I created this stretchy cube specifically to try out stretching as the bouncing ball heavily leaned on the squash part. At first, I only animated the cube. After the cube was finished however, I added the hands as I believed they emphasized the stretch effect even more and really brought the animation together.

FPS: 24

Frames: 52

Tips and discoveries made while animating this:

- For animating real-life matter such as animals or the hands in this example, it's useful to have a reference. You can find or shoot a video yourself doing the animation, for instance. I have a little mirror on my work desk that was very handy for animating the hands.  

- When emphasizing speed (here when the cube is let go and gains its original form back), fewer frames is advised. After comparing how the speed looked with more and less in-between frames, I deleted a bunch of them, making the animation faster.  

Other great exercises for practising the squash and stretch include:

- Facial expressions: from surprise to anger or annoyance, one's head shape can change quite a bit when expressing these emotions

- Tennis ball hit by a tennis racket: the moment of impact is the key here

- Baseball hit by a baseball bat: similar to tennis ball

- Character jumping and landing: squash and stretch can really emphasize a lively character or make the animation more dynamic

- Cat or other feline running or leaping, heck even being petted: felines are naturally very flexible so when they run at high speeds, it looks like their whole body grew longer

I hope you enjoyed reading or even skimming through my blog. Feel absolutely free to comment more ideas or even share your own animations! I'd love to hear and see some of what you can come up with for practising this principle! And with that...

I hope you will anticipate reading the next post.. hehe.

Thank you for reading and see you next post!