Principles of animation

In short

The principles of animation are the twelve working rules set down by Disney animators Ollie Johnston and Frank Thomas in *The Illusion of Life* (1981), distilled from studio practice of the 1930s. They explain how a sequence of still drawings or poses is made to read as weight, force, intent and personality rather than as mechanical movement. In a B.Sc / B.Des course they sit in the Foundations paper and are examined as definitions, as "identify the principle in this shot" questions, and as practical exercises (bouncing ball, pendulum, flour sack, walk cycle). Every Indian studio interview — Technicolor India, DNEG India, MPC, Framestore Mumbai, Rotomaker, Green Gold (Chhota Bheem), Cosmos-Maya, Assemblage, Sharad Devarajan's Graphic India, 99Games and SuperGaming — opens with them, because a reel is judged on timing, spacing and arcs before anything else.

Explained

What the principles are, and the vocabulary they rest on

• Animation is the illusion of motion created by displaying a series of static images in rapid succession; the eye and brain fuse them (persistence of vision, plus the beta movement / phi phenomenon of apparent motion).
• Frame rate: cinema and most Indian television animation work at 24 fps; Indian broadcast (PAL heritage) uses 25 fps; game engines target 30 or 60 fps. A "second of animation" means 24 drawings on ones, 12 on twos (each drawing held for 2 frames — the standard for most 2D character work), 8 on threes.
• Key (extreme): a drawing or pose defining the limit or turning point of an action. Breakdown: the drawing between two keys that defines the *path* of the action. Inbetween: the filler drawings. Inbetweening / tweening: producing them.
• Timing: how many frames an action takes — governs weight and mood. Spacing: how far the subject moves between consecutive frames — governs acceleration, and is the single most important control.
• A chart (timing chart) on the key drawing tells the inbetweener how to distribute drawings: evenly spaced for a mechanical move, bunched at the ends for an ease.
• The twelve principles are observational and craft rules, not physics laws — they apply equally to pencil-on-paper, cut-out, stop-motion, 2D digital (Toon Boom Harmony, Adobe Animate, Krita, OpenToonz) and 3D (Maya, Blender, Unreal), and to UI motion design.

The twelve principles, one by one

1. Squash and stretch — the deformation of a body under acceleration or impact, which communicates weight and material flexibility. Volume must be conserved: as a ball flattens it must widen. A bowling ball barely squashes; a water balloon squashes hugely. Rigid objects (a chair, a sword blade) do not squash. In facial work it drives cheek, jaw and eye deformation.
2. Anticipation — a preparatory movement in the opposite direction to the main action: a crouch before a jump, a wind-up before a throw, a head drawing back before a shout. It readies the audience and makes the action legible; the bigger the action, the longer the anticipation. Omitting it makes motion look sudden and weightless.
3. Staging (presentation) — posing, framing, lighting and composing so the idea reads unmistakably. Test by silhouette: fill the pose black; if the action still reads, the staging works. One clear idea at a time; keep the audience's eye where the story is.
4. Straight ahead action and pose-to-pose — the two methods of production. *Straight ahead:* draw frame after frame from the first, giving spontaneity and fluidity (fire, water, cloth, wild action) but risking drift in volume and proportion. *Pose-to-pose:* plan keys, then breakdowns, then inbetweens — controlled, plannable, scheduling-friendly, essential for dialogue and acting. Professional work combines them: pose-to-pose structure with straight-ahead passages.
5. Follow through and overlapping action — parts of a body do not stop together. Follow through: loose appendages (hair, coat, tail, belly, a dupatta) continue past the stop and settle. Overlapping action: different parts move on different timings, so limbs lag behind the torso. The related idea of drag means the extremity starts later than the base. Moving hold: a "held" pose still drifts slightly so the character never freezes dead.
6. Slow in and slow out (ease in / ease out) — most actions start slow, speed up, and slow before stopping, so drawings bunch at the two extremes and spread in the middle. Achieved by spacing in 2D, by F-curve / graph-editor interpolation in 3D. A linear curve looks robotic; stepped mode is used while blocking keys.
7. Arcs — natural living motion follows curved paths, because limbs pivot about joints. A hand travels on an arc, a head turn dips through an arc, a thrown object follows a parabola. Straight-line motion reads as mechanical. Check arcs by tracking the path of action (onion skin in 2D, motion trail in 3D).
8. Secondary action — a subsidiary movement that supports and enriches the main action without competing with it: a character walking angrily while muttering, hands fidgeting during dialogue. Distinct from overlapping action, which is physics, not acting.
9. Timing — the number of frames given to an action. Few frames = fast, light, snappy; many frames = slow, heavy, sad. Timing also sets character: a young character acts in fewer frames than an elderly one. It is what synchronises action to the exposure sheet (X-sheet / dope sheet) and to the dialogue track.
10. Exaggeration — pushing a pose, expression or timing beyond literal reality while staying true to its essence, because a faithful copy of reality reads as flat on screen. Must be applied consistently across a shot; exaggerating one element only makes it look like an error.
11. Solid drawing — drawing (or posing) with weight, volume, balance and correct perspective in three dimensions; avoiding twinning (both limbs mirrored identically), keeping the line of action strong, respecting anatomy and the centre of gravity. In 3D this becomes solid posing and clean rig control.
12. Appeal — the quality that makes a character pleasant to watch: clear, readable design, charisma, simplicity of shape, asymmetry, and expression — applies equally to a villain, who must be appealingly repellent. Not the same as prettiness.

How the principles are applied in a shot — workflow

1. Read the brief, listen to the dialogue track, thumbnail the acting choices as small sketches; act it out or shoot video reference.
2. Plan timing on the X-sheet: frame numbers for each key, dialogue broken into phonemes for lip sync.
3. Blocking: place the key poses only (3D: stepped keys) — tests staging, silhouette, line of action, solid drawing, exaggeration.
4. Breakdowns: define arcs and the path of action between keys; this is where most of the character of a move lives.
5. Inbetweening / splining: add remaining drawings per the chart, or convert to spline curves and clean the graph editor for slow in / slow out.
6. Polish: follow through and overlapping action, drag on secondary parts, moving holds, secondary action, squash and stretch, eye darts, finger offsets.
7. Review: play in real time, flip or onion-skin for arcs, check silhouette, check it reads at speed, then dailies / supervisor review.

Classification, extensions and comparisons

• Grouping by purpose: *physics* — squash and stretch, follow through and overlapping, slow in and out, arcs, timing; *clarity* — staging, solid drawing, exaggeration, appeal; *acting* — anticipation, secondary action; *method* — straight ahead and pose-to-pose.
• Later additions commonly taught in India: weight, balance, rhythm, the line of action, successive breaking of joints, smear frames and multiple-image blur for fast action, and anti- principles in limited animation.
• Limited animation (Indian TV series economics, 12-15 min episodes) reuses cycles, holds and mouth libraries; principles are still applied, but on fewer drawings — timing and staging do the work that spacing would.
• 2D vs 3D: 2D rebuilds volume in every drawing (squash and stretch is free, solid drawing is hard); 3D preserves volume automatically (solid form is free, squash and stretch needs deformers/blendshapes and counter-animation).
• Game animation differs: motion must loop, blend and respond to input, so anticipation is kept short (it costs player response time), and cycles must be frame-exact at 30/60 fps.
• Limitations: the twelve were derived from hand-drawn character comedy; they do not by themselves govern motion capture clean-up, physics/FX simulation, procedural animation, or realistic VFX creature work where plate physics rule — there, the principles inform judgement rather than dictate keys.

Standards, credits and the Indian industry frame

• Deliverable specs are driven by broadcaster and client requirements, not a single Indian Standard; for public broadcast, programme content must comply with the Cable Television Networks (Regulation) Act, 1995 and its Programme Code, and theatrical release requires certification by the CBFC under the Cinematograph Act, 1952 (amended 2023, which added the UA 7+/13+/16+ age-based categories and anti-piracy provisions).
• Copyright Act, 1957 treats an animated film as a *cinematograph film*; underlying drawings are *artistic works*. Studio work made under a contract of service generally vests in the employer, but assignment and moral rights matter for freelancers — put scope in writing.
• Employment terms (hours, overtime, wages, social security) for studio staff now sit under the four Labour Codes, in force from 21 November 2025. Studios are AVGC sector; the national AVGC-XR policy framework and the National Centre of Excellence (IICT, Mumbai) support training — details of state incentives (Karnataka, Maharashtra, Telangana, Kerala) change year to year, so verify the current scheme before quoting it.
• Service exports of animation to overseas clients are zero-rated under GST; domestic service billing falls in the standard slab structure (5% / 18% / 40% since 22 September 2025) — confirm the rate applicable to your specific service before invoicing.

Key points

• Twelve principles - codified by Johnston and Thomas, *The Illusion of Life*, 1981; drawn from 1930s Disney practice.
• Squash and stretch - deformation showing weight and flexibility; volume is conserved.
• Anticipation - opposite-direction preparation; scales with the size of the main action.
• Staging - one clear idea, readable in silhouette.
• Straight ahead - fluid, spontaneous, hard to control; pose-to-pose - planned keys, breakdowns, inbetweens.
• Follow through - loose parts overshoot and settle; overlapping action - parts move on different timings; drag - extremities start late.
• Slow in / slow out - drawings bunch at extremes; linear spacing looks mechanical.
• Arcs - joints pivot, so natural motion is curved; straight paths read as machinery.
• Secondary action - supports the main action (acting), unlike overlapping action (physics).
• Timing - frame count sets speed, weight, mood and age; spacing sets acceleration.
• Exaggeration - push beyond literal reality, applied consistently.
• Solid drawing - volume, weight, balance, perspective; avoid twinning.
• Appeal - readable, charismatic design, including for villains.
• On ones / twos / threes - 24 / 12 / 8 drawings per second at 24 fps.
• Moving hold - a pose that drifts slightly instead of freezing.
• Blocking → breakdowns → splining → polish - the standard shot pipeline.
• X-sheet (exposure sheet) - the frame-by-frame plan of drawings, dialogue and camera.
• Line of action - the single sweeping curve through a pose that gives it force.

Formulas and examples

Example 1 — Timing a fall (and how many drawings to make). A ball falls 1.2 m. Animate at 24 fps.

• t = √(2 × 1.2 / 9.81) = √(0.2446) = 0.4946 s.
• Frames = 0.4946 × 24 = 11.87 → 12 frames.
• Impact speed v = √(2 × 9.81 × 1.2) = √(23.544) = 4.85 m/s.
• On twos, drawings = 12 ÷ 2 = 6 drawings — but near impact the spacing is so wide that the last 3-4 frames must be on ones, or the ball will appear to jump. So plan ~6 drawings for the first two-thirds and singles for the last third.

Example 2 — Spacing a bouncing ball, and why it reads as weight. A ball travelling 480 px horizontally over 24 frames (23 gaps), uniform horizontal speed:

• Spacing = 480 ÷ 23 = 20.9 px per frame — horizontal spacing stays constant (no horizontal force).
• Vertically, over the same 12-frame fall, successive per-frame drops follow 1, 3, 5, 7… (odd numbers, since h ∝ t²). Scale so the total equals 1.2 m: sum of the first 12 odd numbers = 12² = 144 units, so one unit = 1200 mm ÷ 144 = 8.33 mm.
• Frame 1 drop = 8.33 mm; frame 6 drop = 11 × 8.33 = 91.7 mm; frame 12 drop = 23 × 8.33 = 191.7 mm. The widening gaps *are* slow-out, and the narrow gaps at the apex *are* the slow-in.
• Check: at the apex the ball should hold for about 2-3 frames of near-identical spacing — that is the "float" audiences read as gravity.

Example 3 — Pendulum / follow through on a tail. A tail swings through one full cycle in 20 frames at 24 fps.

• Cycle time = 20 ÷ 24 = 0.833 s; frequency = 1 ÷ 0.833 = 1.2 Hz.
• Equivalent simple-pendulum length: L = g T² / (4π²) = 9.81 × 0.6944 / 39.478 = 0.173 m — a short, light tail. Doubling the tail length would need T = 0.833 × √2 = 1.18 s ≈ 28 frames, which is why a heavy tail must be animated slower.
• Overlapping action: offset each successive tail joint by 2 frames (5 joints → the tip lags the base by 8 frames, i.e. two frames — one-twelfth of a second — short of half a cycle), producing the whip.

Example 4 — Walk cycle budget for an Indian TV episode. A 22-minute episode at 25 fps, animated on twos.

• Total frames = 22 × 60 × 25 = 33,000 frames; drawings at 1 per 2 frames = 16,500 drawings.
• A standard 24-frame walk cycle (12 frames per step) at 25 fps lasts 24 ÷ 25 = 0.96 s per cycle and needs 12 drawings; reusing it for an 8-second walk saves 8 × 25 ÷ 2 = 100 drawings down to 12 + a few overlays — the economics of limited animation.
• If an animator delivers 30 drawings a day, 16,500 drawings = 550 animator-days, i.e. about 25 animators for 22 working days. (Illustrative throughput — actual rates vary widely by studio and style.)

Example 5 — Ease-out spacing table (30 px move, 6 frames, slowing to a stop). Gaps shrinking in the ratio 5:4:3:2:1 (sum 15 units, 30 px ÷ 15 = 2 px per unit):

Comparison of the two production methods:

Where it is used

• Feature and series animation: Green Gold (Chhota Bheem), Cosmos-Maya, Toonz Media (Thiruvananthapuram), Assemblage, Paperboat Design, Reliance Animation — character acting, walk cycles, lip sync for Hindi, Tamil and Telugu tracks.
• VFX and animation services: DNEG India, Technicolor/MPC, Framestore Mumbai, Rotomaker, Prana Studios, Redefine — creature and character animation, matchmove-constrained arcs and weight on live-action plates.
• Games: SuperGaming, 99Games, Nazara, Dhruva Interactive, Lakshya Digital — loopable cycles, hit reactions, snappy anticipation at 30/60 fps.
• Advertising, explainer and edtech: motion graphics for BYJU'S-style content, bank and telecom ad films; the same slow in/out, anticipation and arcs applied to typography and infographics.
• UI / UX motion design: app micro-interactions in Indian fintech and e-commerce products — easing curves, anticipation and staging are directly the same principles.
• Job roles: 2D animator, 3D character animator, inbetweener, key animator, rigger (who must build for squash and stretch), layout artist, animation supervisor, motion designer; also the practical component of B.Sc Animation, B.Des and BVA examinations and portfolio reviews.

Interview questions

• Q: Name the twelve principles of animation and their source? A: Squash and stretch, anticipation, staging, straight ahead and pose-to-pose, follow through and overlapping action, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing and appeal — set out by Ollie Johnston and Frank Thomas in *The Illusion of Life* (1981).
• Q: What is the difference between timing and spacing? A: Timing is how many frames an action takes; spacing is how far the subject moves between consecutive frames. Two shots with identical timing but different spacing read as entirely different weight.
• Q: Why must volume be conserved in squash and stretch? A: Because a body that gains or loses apparent mass when it deforms reads as inflating or deflating rather than as a solid object under force.
• Q: Difference between follow through / overlapping action and secondary action? A: Follow through and overlapping action are physical consequences of inertia on parts of the same body; secondary action is a deliberate acting choice added to support the main action.
• Q: When would you animate straight ahead rather than pose-to-pose? A: For effects and unpredictable organic motion — fire, water, smoke, cloth, a wild tumble — where spontaneity matters more than pose control.
• Q: How do you check your arcs? A: Flip or onion-skin the drawings in 2D, or switch on the motion trail / editable motion path in 3D and look for kinks and flat spots in the path of the hand, head and hips.
• Q: What does "on twos" mean and when does it fail? A: One drawing exposed for two frames — 12 drawings a second at 24 fps. It fails when spacing per frame grows large (fast action, impacts, fast camera moves), where it strobes and must go on ones.
• Q: What is a moving hold and why use it? A: A hold in which the pose drifts very slightly instead of being frozen, so the character stays alive; a dead freeze on a 3D character looks like a crashed render.
• Q: What is twinning and how do you fix it? A: Both arms or both legs doing the identical mirrored thing, which looks lifeless; fix it by offsetting one side in timing, height and angle and strengthening the line of action.
• Q: How do the principles change for game animation? A: Cycles must loop seamlessly and blend between states, and anticipation must be kept short or the controls feel laggy — responsiveness overrides the ideal wind-up.
• Q: Is the principle of exaggeration an excuse to break anatomy? A: No — exaggeration pushes the essence of a pose while solid drawing keeps volume, balance and perspective intact; the two are applied together.
• Q: Which principle would you apply first to fix a jump that looks weightless? A: Anticipation and spacing — add a crouch before take-off, bunch drawings at the apex and widen them sharply into the landing, then add squash on contact and follow through on settle.

Common mistakes

• Defining the principles by name only and failing the applied question — exams ask you to *identify* or *apply* the principle in a described shot.
• Confusing timing with spacing, or claiming "slow in slow out" means the whole action is slow.
• Squashing an object without widening it, so the character visibly loses volume.
• Adding an anticipation that is as long as the main action, which kills the snap; or omitting it entirely so the move pops.
• Treating overlapping action and secondary action as the same principle.
• Animating everything on twos regardless of spacing, producing strobing on fast action and impacts.
• Relying on default linear or spline interpolation in 3D without cleaning the graph editor, which gives floating, weightless motion with broken arcs.

Related topics

Character design · Storyboarding and animatics · Drawing and sketching · Rigging and skinning · Walk cycles and body mechanics · 3D animation in Maya and Blender