If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Teaching guide: Intro to JS - Animation basics

This is a teaching guide for the Intro to JS lesson on Animation basics.

What the student will learn

  • The basic idea behind animations - a drawing repeated over and over, slightly different each time.
  • How to define a draw() function in their program so that the lines of code inside get repeatedly called by the computer over and over, about 60 frames per second.
  • How to code an animation by defining a variable, changing it in each frame, and using that variable to change some aspect of the shapes in the program.
  • How to increase and decrease the numbers stored in variables using shortcuts, +=, -=, ++, and --.

The student will be able to write code like:

Where students struggle

  • Students often get confused about which code goes inside the draw() function and which code goes outside. For example, they might both declare and increment their animating variable inside the draw() function. The animation won’t work, since the variable doesn’t actually change each frame. They need to declare the variable outside draw(), at the beginning of the program, and make sure all they do inside draw() is change that variable. Encourage students to think about the values of their variables and position of their drawings at each second. They can even sketch an animation on paper first to gain a better intuition for the values involved.
  • Students can become confused about which lines of code are actually inside the draw() function. Encourage them to indent the code inside their function to help them visualize it better.
  • Students may attempt to animate multiple shapes in multiple directions in their project, and struggle to figure out how to do that. They’ll need to use multiple variables in that case. Suggest they think through what the different values would be for each shape over time, and then they’ll see what variables they need to change at each frame.

Additional materials: Discussion questions

These are questions that you can ask students individually after they've done the lesson, or lead a group discussion around, if everyone's gotten to the same point.
  • Do variables make more sense now that they’re using them for animations?
  • Watch an animation, like a Pixar short. Talk about how that could be animated using variables.

Additional materials: Trivia questions

These can be fun to do as a class after everyone’s gotten through the lesson. They can also lead to discussion about which questions are the hardest. Play them on Quizizz.

Want to join the conversation?

  • duskpin sapling style avatar for user Ms. Kowalewicz
    I am also not finding the animation Quizizz. My students have been loving them and I am super sad they won't be able to take it tomorrow.
    (1 vote)
    Default Khan Academy avatar avatar for user
  • winston baby style avatar for user mwheeler2025
    I just want to know how to move a rectangle on a plane by pressing a certain button :(
    (1 vote)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Elizabeth Stoker-Lavelle
    The link above goes to the Quizizz for Variables. Can't seem to find the animation one on Quizizz. Does it exist?
    (1 vote)
    Default Khan Academy avatar avatar for user
  • primosaur sapling style avatar for user LukeO
    i need to learn how ot animate or else cause i see youtubers animateing and i want to try it so please help me with this!
    (0 votes)
    Default Khan Academy avatar avatar for user