12 principles of animation – Part 1 of 3

by Alexandra January. 30, 18 0 Comment

Disney’s Twelve Basic Principles of Animation were introduced by the Disney animators Ollie Johnston and Frank Thomas in their 1981 book The Illusion of Life: Disney Animation.

Though originally intended to apply to traditional, hand-drawn animation, the principles still have great relevance for today’s more prevalent computer animation and UI animation.

This tutorial is about understanding the principles and few techniques in Animate that allow us to represent it.


First Part will cover

1.Squash and Stretch



4.Straight Ahead Action and Pose to Pose


1. Squash and stretch

Squash and Stretch is what gives flexibility to objects. In this principle the animated object get longer or father to emphasize: Speed, momentum, weight and mass.

As the ball starts to fall and picks up speed, the ball will stretch out just before impact, and as the ball impacts the ground, it squashes, and as it takes off again it stretches.


Step 1 – Create scene

Create two layers with a ball and background.

creating a scene in Adobe Animate tutorial

Step 2 – Set Motion Tween

Insert Frame on the timeline where you want to be end of the animation. Let’s do second and a half.

setting motion Adobe Animate tutorial

Select layer with the ball and Create Motion Tween.

Adobe Animate animation techniques

Then select 10f and move the ball like its drop on the floor.

animation techniques tutorial

Select 17f and move it up.

Adobe Animate motion tutorial

Do the same till the end of the animation.

Adobe Animate animation tutorialSelect Convert anchor point tool and curve the path. That will make movement more natural.

Adobe Animate techniques

So now we have bouncing ball, but let’s apply the principle of Squash and Stretch

Step 3 – Use Squash and Stretch principle.

Select the layer “ball” convert it to Frame-by-Frame animation.

frame-by-frame animation tutorial

Activate Onion Skin Outlines so we can see clearly every move of the ball, it will help change size of the ball properly.

Adobe Animation tutorial

Chose frame by frame and squash and stretch the ball where touch the ground.

animating frames tutorial


Here is the result:


2. Anticipation 

The principle of Anticipation helps to prepare the viewer for what’s about to happen. When applied, it helps to make the object’s action more realistic.


In this animation with anticipation I will use Motion tween and bone tool.


Step 1 – Create scene

Including 3 layers  (Background, ball, pinch)

animation principles tutorial

Step 2- Animate the ball

Set 2s to be the end of the animation.

adobe animate basics tutorialCreate Motion tween on the Layer (ball)

Adobe Animate creating animation

Insert Keyframe on 17f then drag the ball to the center of the scene.

Insert Keyframe on 32f and move it up till its out of the scene.

So between 17f and 32f ball supposed to stay with no move.

basics of animationNote: Make sure the ball is a Symbol


Step 3 – Use Bone tool

It’s time to animate the pinch with the help of Bone tool.

Select Bone tool, create construction.

create Bone tool construction

Then start animate the pinch every 2 seconds to grab the ball and take it.

bone tool animation tutorialFrames before reach the ball you should open it and then close it by moving the bones we create earlier.

Adobe Animate bone toolThe result:


Principle of Staging cover big area of animating and there is no formula. Most of the time it’s more about composition and controlling the eyes of the viewer. Through composition, zooming or avoid overlapping. Simply put: keep the focus on what’s important, and keep everything else of non-importance to a minimum.


In this animation we will use the princip when we just change one of the colors.


Step 1- Create a scene

On layer first is “background”

Second “blue ball”  (laiter we will duplicate few times)

And the third (on top) our focal point, a red ball

creating stage animation AA

Create Motion tween on both balls and make them bounce out of the stage.

creating motion tween Adobe AnimateThen duplicate layer with the blue ball few times. Then move them on different directions.

Adobe Animate tutorial

Move them on different directions.

animation principles tutorial

And the end we have example of staging by changing one of the ball with different color, we are making the eye of the viewer follow the red ball.

5. Straight Ahead Action and Pose to Pose

This terms describe two methods to use animating drawings. Straight Ahead Action and Pose to Pose.

Straight ahead action involves drawing Frame-by-frame from start-to-finish. Basically is animating as you go.

With the Pose to Pose technique, you draw the beginning frame, the end frame, and a few key frames in between. Then you go back and complete the rest. Using this technique gives you a bit more control within the scene and allows you to increase the dramatic effect.

Step 1: Create a scene

Create two layers “cup” and “water”

Draw a cup on layer “cup”

pose to pose Adobe Animation tutorial

Step 2 – Animating

Make 1s, Frame-by-Frame animation on layer “water”.

frame-by-frame animation tutorialHere are frames:

animating frames Adobe Animate principles tutorial

It’s a bit fast so I Insert frame after every existing frame to make the animation looks more realistic.

insert frame Adobe Animate

Here is the result

This tutorial explains the first 4 principles of 12 principles of animation by Ollie Johnston and Frank Thomas. In next part of the tutorial we are going to show you next 4 principles: Follow through and overlapping action, Slow in and slow out, Arc, Secondary action.


Social Shares

Leave a Comment