Animations and Costumes in Scratch

How animation really works

Have you ever drawn a stick figure in the corner of a notebook on each page, then flipped the pages fast to make it move? That is a flip-book, and it is exactly how every cartoon and video game animation works. You show a series of pictures that are each a little different, one after another, quickly. Your eyes join them together and you see movement.

In Scratch, those pictures are called costumes. A single sprite can hold many costumes, and your code chooses which one to show. By switching costumes at the right speed, you can make a character walk, a bird flap, or a fish swim. If Scratch is new to you, start with getting started with Scratch, then come back to bring your sprites to life.

Step 1: Look at a sprite's costumes

Open Scratch and click a sprite that already has more than one costume, such as the Cat sprite Scratch starts with.

1. Click the sprite, then open the Costumes tab at the top-left.
2. You will see a list of pictures. The Cat has two: costume1 and costume2. Look closely — in one, its legs are together; in the other, they are stepping out.
3. Click each costume to see it on the stage. Notice how only the legs change. Swapping between these two pictures is what will make the cat appear to walk.

Each costume has a name, and you can switch to a costume by its name in code.

Step 2: Switch costumes by hand

Before we loop, let's prove that switching costumes changes the picture. Add this script to the Cat:

when green flag clicked
switch costume to [costume1]
wait 1 seconds
switch costume to [costume2]

Click the green flag. The cat shows its first costume, waits one second, then switches to the second. You have just controlled which picture appears. Now we just need to do this over and over, automatically.

Step 3: Animate with 'next costume' in a loop

The next costume block flips the sprite to the following costume in its list. After the last costume it loops back to the first, so it cycles forever. Put it inside a forever loop with a short wait, and you have an animation:

when green flag clicked
forever
  next costume
  wait 0.2 seconds

Reading it line by line:

• The forever loop repeats its blocks endlessly.
• next costume switches to the next picture each time around.
• wait 0.2 seconds pauses so the costumes do not flip too fast to see.

Click the green flag. The cat's legs move — it is "walking on the spot." This is the heart of animation: a loop that keeps changing the costume.

Step 4: Make it walk across the stage

Walking on the spot is fine, but a real character moves too. We add movement by changing the sprite's x position at the same time. Larger x means further right on the stage:

when green flag clicked
go to x: -200 y: -100
forever
  next costume
  change x by 10
  wait 0.2 seconds

Now each loop does two jobs:

1. next costume swaps the legs, so it looks like stepping.
2. change x by 10 slides the whole cat 10 steps to the right.

Together, these make the cat walk across the stage, just like in a real game. To learn more about x and y movement, see coordinates and movement in Scratch.

A worked example: a flapping bird

Let's animate a different character to see the same idea with our own costumes. We will make a bird flap its wings.

1. Add a bird sprite, or draw one. Draw it with the wings up.
2. In the Costumes tab, right-click the costume and choose duplicate to make a copy. In the copy, move the wings down. You now have two costumes: wings-up and wings-down.
3. Add this script:

when green flag clicked
forever
  switch costume to [wings-up]
  wait 0.3 seconds
  switch costume to [wings-down]
  wait 0.3 seconds

Here is what happens, step by step:

1. The forever loop starts.
2. The bird shows wings-up and waits 0.3 seconds.
3. It switches to wings-down and waits 0.3 seconds.
4. The loop repeats, so the wings go up, down, up, down — the bird flaps!

You could also write this with next costume since there are only two costumes, but naming the costumes makes the code easy to read, and it works even when you add more costumes later.

Try it: make it your own

You now know the secret of animation. Try one of these challenges:

• Change the speed: make the wait smaller for a fast, frantic flap, or bigger for a slow, calm one.
• Add more frames: draw a third costume halfway between up and down, then use next costume in a loop for smoother flapping.
• Make it bob: add change y by 5 then change y by -5 so the bird floats up and down as it flaps.
• Animate a different action: draw two costumes of a fish, one with its tail left and one with its tail right, and loop them to make it swim.

If your animation looks wrong, check the order of your costumes and the size of your wait. Reading your blocks in order to fix problems is called debugging, and every animator and coder does it. Have fun bringing your sprites to life! 🎬