Grade Levels: 3-5, 6-8

This lesson plan, adaptable for grades 4-8, features Creative Coding, a project-based approach to coding that prompts students to show what they know about a topic by using BrainPOP assets. This lesson focuses specifically on the Stop Motion project in which students put together a series of still images so they appear to be moving.

Lesson Plan Common Core State Standards Alignments

Students will:

  1. Program in JavaScript
  2. Learn to initialize and count with arrays
  3. Explore movie properties to configure looks and sounds
  4. Understand that programming languages use special characters to express different kinds of information (syntax)
  5. Apply their knowledge of a BrainPOP topic



arrays, code, JavaScript, sequence, syntax


Preview the Stop Motion tutorial screencast.

Preview and play with the Stop Motion project. To access, click the Creative Coding button on a BrainPOP topic page. NOTE: You must be logged in with My BrainPOP on individual accounts.

For help getting started and other support resources, such as differentiation and collaboration tips, review the Creative Coding Teaching Resources.

Preview the associated BrainPOP topic movie.

Lesson Procedure:

  1. Ask students to share what they know about stop motion animation. This can include movies they know of that are created with stop motion, such as “The Lego Movie”. Point out that claymation is a form of stop motion.  After everyone has had a chance to share, explain that a stop motion animation is when you put together a series of still pictures to create the illusion of movement. If time allows, show the BrainPOP movie Digital Animation.
  2. Display the Stop Motion project for the topic you’re studying on the whiteboard. Read aloud the prompt at the top of the screen. Explain that there is more than one way to respond to the prompt, and that they should be as creative as they can. Explain that stop motion is useful for demonstrating a process or sequence of events because you can show how something evolves and changes. Emphasize the importance of order in a stop motion animation. Point out that the process or sequence would not make sense if the pictures were not in order.
  3. Write the word ARRAY on the whiteboard. Tell students that array is an ordered list of data that can hold words, numbers, objects, and more. Write this example of an array on the board: [“image1.png”, “image2,png”, “image3.png”];
  4. Before beginning their Stop Motion projects, show the related BrainPOP movie on the whiteboard for the whole class to watch.
  5. Working individually or in pairs, have students review the image options for their stop motion animation  in the assets panel on  the lower right. While they’re deciding, distribute the Stop Motion Planning Sheet.
  6. After selecting their images for their project, have students use the planning sheet to sketch out a sequence of pictures for their stop motion animations. Using the lines under each image, have them write an explanation of that image’s role in the sequence. If working in pairs, suggest that one student be the artist and the other the writer.
  7. If necessary, you can model the first few steps of the project on the whiteboard as students follow along at their computers or devices. Students will enjoy playing with the filters in this project. Encourage them to experiment with the filters by combining them to see what happens. Ask them why the might choose one filter over another? Circulate as students work, providing support as needed.
  8. This project is relatively short and so provides an excellent opportunity to practice iterating on their work. Once students feel they’ve completed their projects, have them compare their Stop Motion animations with a partner. Have them note how their projects are alike and different.
  9. After everyone has completed and shared their Stop Motion projects, come together as a class and discuss these questions:
    • How do arrays make our programs more powerful?
    • If you set interval to 1000 what happens? If you set it to 100 what happens? Why?
    Discuss other cool things you could do with stop motion and arrays. You might be able to use these ideas in future projects! Write your ideas in your journal.

Extension Activities:

Challenge students to create a filter that supports the theme of their movie using small lines of code like grayscale() and tint(“red”, 10); and/or add a title using the text function.

Another challenge is to have students expand on their projects by exploring the options in the Need Help tab at the bottom of the left panel. These tips are only a starting point. Creative Coding is a full JavaScript editor, so students can customize their projects as they would like.