12 Principles of Animation – Timing, Spacing, Squashing & Stretching

January 27, 2014 § 1 Comment

Thinking & Practice Tutorial 27/01/14

The 12 principles were set out by animators to add realism to motion graphics. These principles were designed before character animation, but because they are dealing with moving objects they are still relevant and can be applied to character animation.

Timing and Spacing

The first thing we looked at was timing and spacing.

Timing – how long it takes to complete an action

Spacing – the distance between each pose or key

All animation is about timing and spacing. A new composition was created with a solid sized 100 x 100. Position was turned on and the stopwatch was started to activate the animation. Once the timeline and the shape is moved, a dotted motion line appears – this represents how many frames there are between keys.

Screen Shot 2014-01-27 at 13.56.20

If  the time between the keys is decreased, the shape moves faster because there are less frames and the spacing has been changed. That effects the timing of our action. The speed of the moving object can determine an impression of weight (faster = heavier, slower = lighter); this adds an essence of realism to this simple motion graphic.

The following graphic explains this:


Squash and Stretch

In a new composition, three different coloured circle solids were placed at the top. Using the pan behind tool, the centre point of the shape was moved to the bottom before dragging out the shape using shift and moving it to top of the timeline.

Screen Shot 2014-01-27 at 14.06.02

Screen Shot 2014-01-27 at 14.07.48

The first shape was turned off to compare the linear movement of the shape against the shape that we applied different settings to. As the other two objects hit the bottom of compositions, the scale needed to be altered. The x axis was changed to 200 and the y axis to 50. The shapes then gradually squashed as they approached the bottom of the composition as shown:

Screen Shot 2014-01-27 at 14.12.51

The scale needs to changed just before the objects hit the ground. The frame was selected then copied and pasted into the composition. Then press play and the animation shows the squash, if the speed is altered the animation will improve. This brings us to another principle of animation – exaggeration. To exaggerate the movement of objects and convey an essence of both form and weight. Exaggerating distortion on third shape gives the impression of the whole feel of the object appearing more rubbery and has more character. Adding motion blur and easy ease further enhance this. Switching the first shape on that was not altered and viewing it in comparison to the final shape shows that the first shape is basic linear movement, but the final shape has more character and form. This shows some of the basic principles at work.


§ One Response to 12 Principles of Animation – Timing, Spacing, Squashing & Stretching

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading 12 Principles of Animation – Timing, Spacing, Squashing & Stretching at Tom Davidson.


%d bloggers like this: