Frame by Frame: Simple Animation

Active learning works for this topic because students must physically draw and sequence frames to see how small changes make movement feel real. When they hold their own flipbooks or press play on their GIFs, the principles of squash, stretch, and timing move from abstract ideas to observable results in their own creations.

• Primary 5
• Art
• 4 activities
• 30 min–50 min

Learning Objectives

1. Demonstrate the principles of squash and stretch by creating a GIF animation of a bouncing object.
2. Analyze the relationship between frame rate and the perceived weight of an animated object.
3. Create a short GIF animation that conveys a specific emotion through timing and deformation.
4. Explain how sequential drawing and timing create the illusion of movement in animation.
5. Critique peer animations based on the effective use of squash, stretch, and timing.

Peer Teaching

⏱ 45 min·Pairs

Pairs: Bouncing Ball GIF

Pairs sketch 10 frames of a ball bouncing: squash on impact, stretch on rebound, vary timing for weight. Scan drawings or draw digitally, then assemble into GIF using free tools like GIPHY or Photoshop Express. Test and tweak frame speeds together.

Prepare & details

Explain how subtle changes between frames create the illusion of life.

Facilitation Tip: During Pairs: Bouncing Ball GIF, ask partners to time their ball’s bounce with a metronome set to 60 beats per minute to anchor frame spacing.

Setup: Presentation area at front, or multiple teaching stations

Materials: Topic assignment cards, Lesson planning template, Peer feedback form, Visual aid supplies

• Understand
• Apply
• Analyze
• Create
• Self-Management
• Relationship Skills

Peer Teaching

⏱ 50 min·Small Groups

Small Groups: Emotion Flipbooks

Groups create 12-frame flipbooks or GIFs of a character jumping happily (fast stretch) versus sadly (slow squash). Draw frames on paper first, discuss emotion cues, then digitize. Present to class for feedback on life-like quality.

Prepare & details

Analyze the relationship between timing and an object's perceived weight.

Facilitation Tip: For Small Groups: Emotion Flipbooks, provide colored paper so students can use shading to emphasize squash and stretch in each frame.

Setup: Presentation area at front, or multiple teaching stations

Materials: Topic assignment cards, Lesson planning template, Peer feedback form, Visual aid supplies

• Understand
• Apply
• Analyze
• Create
• Self-Management
• Relationship Skills

Peer Teaching

⏱ 30 min·Whole Class

Whole Class: Timing Analysis Demo

Project sample GIFs with adjustable speeds. Class votes on perceived weights, then recreates one variation in shared digital canvas. Discuss how timing changes illusion of motion and emotion.

Prepare & details

Differentiate how animation conveys emotion beyond a still image.

Facilitation Tip: In Whole Class: Timing Analysis Demo, play slow-motion videos of real bounces next to student GIFs to help them notice subtle differences.

Setup: Presentation area at front, or multiple teaching stations

Materials: Topic assignment cards, Lesson planning template, Peer feedback form, Visual aid supplies

• Understand
• Apply
• Analyze
• Create
• Self-Management
• Relationship Skills

Peer Teaching

⏱ 35 min·Individual

Individual: Refine Personal GIF

Students select a personal object sketch, apply squash-stretch-timing, create GIF. Export and self-assess against rubric on lifelikeness and emotion before optional sharing.

Prepare & details

Explain how subtle changes between frames create the illusion of life.

Facilitation Tip: For Individual: Refine Personal GIF, give students a one-minute timer to test their GIF at least three times before finalizing.

Setup: Presentation area at front, or multiple teaching stations

Materials: Topic assignment cards, Lesson planning template, Peer feedback form, Visual aid supplies

• Understand
• Apply
• Analyze
• Create
• Self-Management
• Relationship Skills

Teaching This Topic

Start with short, clear demonstrations of squash and stretch using everyday objects like a stuffed animal or a balloon. Avoid lengthy lectures; instead, let students discover principles through trial and error. Research shows that when students manipulate frames themselves, they internalize timing and weight faster than through observation alone. Keep the focus on the relationship between deformation and emotion, not just technical precision.

What to Expect

Successful learning shows when students can point to their GIFs and explain how squash or stretch shapes the movement, and how spacing controls speed and weight. They should adjust frames deliberately to express emotion, not just fill pages with drawings.

Watch Out for These Misconceptions

Common Misconception

During Pairs: Bouncing Ball GIF, some students may assume that adding more frames always makes the animation smoother.

What to Teach Instead

During Pairs: Bouncing Ball GIF, have partners create two versions of the same bounce: one with 6 frames and one with 12 frames. After playback, ask them to compare which version better shows the ball’s weight and why. Redirect them to focus on squash and stretch rather than frame count.

Common Misconception

During Small Groups: Emotion Flipbooks, students may believe objects do not deform in real life.

What to Teach Instead

During Small Groups: Emotion Flipbooks, show a slow-motion video of a bouncing ball or a person jumping, pausing to point out the squash at impact and stretch during ascent. Then ask students to recreate those deformations in their flipbooks before adding emotion.

Common Misconception

During Whole Class: Timing Analysis Demo, students might think timing only affects speed, not emotion or weight.

What to Teach Instead

During Whole Class: Timing Analysis Demo, play two versions of the same GIF—one fast and one slow—and ask students to describe the ball’s weight and mood in each. Guide a discussion on how timing shapes both physical and emotional qualities in animation.

Assessment Ideas

Quick Check

After Pairs: Bouncing Ball GIF, show a sample GIF and ask students to identify where they see squash, stretch, and how the timing affects the ball’s weight. Collect responses on a sticky note for immediate feedback.

Peer Assessment

During Small Groups: Emotion Flipbooks, have students trade flipbooks and use a checklist to evaluate each other’s work: 'Does the animation show clear squash and stretch? Is the timing effective in conveying emotion? Provide one specific suggestion for improvement based on the principles learned.'

Exit Ticket

After Whole Class: Timing Analysis Demo, ask students to draw two frames of a falling object—one just before impact (label 'squash') and one during impact (label 'stretch'). Below the drawings, they write one sentence explaining how spacing frames would change the speed of the fall.

Extensions & Scaffolding

• Challenge students who finish early to add a second character interacting with their bouncing ball, using squash and stretch to show impact (e.g., a character jumping away).
• Scaffolding for struggling students: Provide pre-drawn ball outlines in three sizes per frame to reduce drawing pressure and help them focus on spacing and deformation.
• Deeper exploration: Ask students to research and recreate a short wildlife clip frame by frame, analyzing how animals use squash and stretch in real motion.

Key Vocabulary

Frame	A single still image in an animation sequence. Many frames shown in rapid succession create the illusion of motion.
GIF (Graphics Interchange Format)	A common image file format that supports animated sequences. GIFs loop continuously, making them ideal for simple animations.
Squash and Stretch	Animation principles where an object deforms to emphasize its speed and impact. Squash occurs on impact, stretch occurs during acceleration or movement.
Timing	The number of frames displayed per second, or the spacing between key frames. Timing controls the speed and rhythm of an animation, affecting perceived weight and emotion.
Loop	A sequence of animation frames that repeats continuously. This is a fundamental characteristic of GIFs.