Home›Lesson Plans›Computer Science›Programming · Grade 5

Coding Sprites & Animation

Fifth graders discover how animation works — many slightly different frames shown fast look like smooth motion, just like a flip-book. In block coding, you move a sprite by changing its x and y position over time. They test the idea, then animate a sprite.

Grade 5Sprites & Animation45 minutes1 class periodCSTA / ISTEExplicit teaching4 StandardsCSTA
Start the Lesson
Assign or share this lesson
Share to Google Classroom Share to Microsoft Teams

Copy link works with Canvas, Schoology, Moodle and any other LMS — paste it in as a resource or assignment.

Lesson at a Glance

Everything you need before the bell rings

Learning Objectives

Students will be able to…

  • ✓Explain how animation works.
  • ✓Move a sprite with x and y.
  • ✓Change a costume to animate.
  • ✓Create a short animation.
Essential Question

How do you make things move on a screen?

0
Lesson Phases
0
Vocabulary Terms
0
Standards Aligned
0
Interactive Task
Check It · Interactive

How Animation Works

Project each item and have students answer about sprites and animation.

🎬 Understand how sprites and animation workTry it
Answer each question about sprites and animation.
The Lesson · Use → Modify → Create (a coding progression with Unplugged practice)

45 minutes, five moves

Tap any phase to open the teacher moves and student actions.

1

Hook — Flip-Book Magic

5 min

How does a cartoon make a still picture move?

👩‍🏫 Teacher Moves

  • Flip a flip-book fast.
  • Ask why it looks like motion.
  • Set the goal.

🎒 Student Actions

  • Watch.
  • Guess.
  • Get ready.
2

Use — Sprites & Animation

10 min

Students use sprites.

👩‍🏫 Teacher Moves

  • Send students to How Animation Works.
  • Note frames & x/y position.
  • Note what a sprite is.

🎒 Student Actions

  • Answer.
  • Note it.
  • Note it.
3

Modify — Change the Motion

12 min

Students modify.

👩‍🏫 Teacher Moves

  • Change a sprite’s x to move it right.
  • Switch its costume.
  • Watch the animation change.

🎒 Student Actions

  • Change.
  • Switch.
  • Watch.
4

Create — Create

12 min

Students create.

👩‍🏫 Teacher Moves

  • Pick a sprite.
  • Change x/y in a loop to move it.
  • Swap 2 costumes to animate it.

🎒 Student Actions

  • Pick.
  • Move.
  • Animate.
5

Reflect — Reflect

6 min

Students close.

👩‍🏫 Teacher Moves

  • Say how animation works.
  • Say what x and y do.
  • Complete the exit ticket.

🎒 Student Actions

  • Say it.
  • Say.
  • Complete the exit ticket.
Standards Alignment

Built to the standards you report on

Aligned to the CSTA K-12 Computer Science Standards and the ISTE Standards for Students.

CSTA
1B-AP-12

Modify or remix programs to develop something new.

CSTA
1B-AP-10

Create programs with sequences, events, loops & conditionals.

CSTA
1B-CS-02

Model how hardware and software work together.

ISTE
4 Innovative Designer

Use a design process to create original work.

Differentiation

One lesson, every learner

Multilingual Learners

ELL / EMERGING READERS
  • Use a physical flip-book.
  • Frame: “change ___ a little, show fast.”
  • Act out frame-by-frame.

Support & Access

IEP / 504
  • Move the sprite one way only.
  • Change x only.
  • Use 2 costumes.

Stretch & Extend

GIFTED / EARLY FINISHERS
  • Loop the motion smoothly.
  • Add a 3rd costume.
  • Animate two sprites at once.
Materials

What to gather

  • 📽️Screen / board
  • 📓A flip-book
  • 💻How Animation Works
  • 🎮Scratch or paper code
  • ✏️Notebooks
  • 🎫Exit-ticket slips
Vocabulary

Key terms — hover for a quick definition

animationmany frames shown fast to look like motionframeone still picture in an animationspritea character or object you can controlcostumeone of a sprite’s looksx positionleft–right position on screeny positionup–down position on screenlooprepeat steps to keep motion goingsmoothsmall changes make motion look natural
Evaluate

Exit Ticket

Preview the three formative checks. Tap “Sample answer” to see what mastery looks like — hide them before you print for students.

QUESTION 1
How does animation work?
Many slightly different frames shown quickly look like motion.
QUESTION 2
What two things set a sprite’s position?
Its x (left–right) and y (up–down).
QUESTION 3
What is a sprite?
A character or object you can move and animate.

Reflect: sprites & animation.

Have students describe how they would move a sprite across the screen. A printable animation worksheet is in the Computer Science library.

Study · Flashcards

Study the key terms

Tap a card to flip it, then rate whether you knew it. Built from this lesson’s vocabulary.

🃏 CS Sprites and Animation (Grade 5)Flip
Card 1
Term
Tap to flip →
Meaning
0

Nice work!

Practice · Quiz

Check your understanding

A quick self-check with instant feedback, drawn from this lesson’s key terms.

📝 CS Sprites and Animation (Grade 5)Quiz
Score: 0
1 / 6
Question 1
0%

Nice work!

Practice · Worksheet

Printable worksheet

A print-and-go review sheet with a built-in answer key. Tap “Show answer key” to reveal answers, or print the clean version for students.

🖨️ CS Sprites and Animation (Grade 5)Print
Name: ________________________
Date: ____________

Part A · Write the word that matches each meaning

Word bank: animation, costume, frame, loop, smooth, sprite, x position, y position
  1. up–down position on screen
  2. repeat steps to keep motion going
  3. a character or object you can control
  4. one of a sprite’s looks
  5. many frames shown fast to look like motion
  6. one still picture in an animation
  7. small changes make motion look natural
  8. left–right position on screen

Part B · Show what you learned

  1. How does animation work?
  2. What two things set a sprite’s position?
  3. What is a sprite?
Answer key — Part A: 1) y position · 2) loop · 3) sprite · 4) costume · 5) animation · 6) frame · 7) smooth · 8) x position
Part B: 1) Many slightly different frames shown quickly look like motion. 2) Its x (left–right) and y (up–down). 3) A character or object you can move and animate.