Costume Switching Loops — Scratch L2

Where this arc is heading: one cat walks across a KL scene, glows with a magical shimmer, and breathes with a gentle pulse — the whole showcase triggered when the backdrop changes. Each lesson adds one animation skill until this scene runs by itself.

Learning Goals 3 min

By the end of this lesson you will be able to:

Open the Costumes tab, identify a sprite's costumes, and explain that only one is visible at a time.
Use next costume inside a forever with a wait (0.1) seconds to make the sprite animate.
Adjust the wait number to control frame rate — and predict what "too fast" and "too slow" look like.

Warm-Up — the costume flip-book 7 min

Open Scratch. Click the cat sprite. Click the Costumes tab (top-left, next to Code). You'll see two costumes: costume1 and costume2. They look almost identical — but in costume2, the cat's back leg is forward and the front leg is back.

Now click each one in turn. The cat on the Stage swaps between them. That's it. That's the whole secret of animation.


when flag clicked
next costume

Two blocks. Click the flag — the cat flips to the other costume, once. Click again — it flips back.

Try it. Click the flag five times. The cat alternates costumes. It looks like the cat is twitching. To turn twitching into walking, we need Scratch to do those costume flips by itself, fast, in a row.

Reveal — the key insight

Animation isn't drawing. Animation is showing two slightly-different drawings, one after the other, fast enough that your brain fills in the motion. A flipbook in your maths exercise book. Cartoons on TV. The cat in Scratch. All the same trick.

Today's lesson is the loop that does the flipping for you.

New Concept — animation = loop + next costume + wait 15 min

An animation in Scratch is a sandwich of three blocks: a loop on the outside, a next costume in the middle, and a wait for timing. That's the whole recipe. Vary the costumes, vary the wait, vary the loop — but the sandwich never changes.

Costumes are like pages in a flip-book

Every sprite has a costume list — the strip down the left of the Costumes tab. next costume moves to the next one in the list. When it reaches the end, it wraps around to the first one and starts over. You never need to write "if at the last costume, go back to the first" — Scratch does that for free.


when flag clicked
forever
  next costume
end

The simplest possible animation. Forever, flip to the next costume. Try it — the cat blurs out.

Click the flag. The cat looks like it's vibrating, or like a single blurry shape. Why? Because Scratch is flipping costumes as fast as your computer can — dozens of times a second. Your eyes can't keep up. To you, all the costumes are on screen at once.

The fix: wait between flips

We need to slow Scratch down so your eyes can see each costume. The wait (0.1) seconds block is how.


when flag clicked
forever
  next costume
  wait (0.1) seconds
end

The complete animation pattern. Flip costume, pause for a tenth of a second, repeat forever.

Click the flag now. The cat looks like it's walking on the spot — legs swapping back and forth, ten times a second. Same two costumes as before. Same forever loop. The only new thing is the wait, and the wait is everything.

The frame-rate dial

That 0.1 number is your frame rate dial. It controls how long each costume stays on screen before being replaced. Three rough zones:

Too fast (0 or no wait at all): a blur. Your eyes can't process the costumes; you see all of them stacked.
Just right (0.05 to 0.2): smooth animation. The cat walks, the bird flaps, the fish wiggles.
Too slow (0.5 or higher): a stutter. The brain sees each frame as a separate picture. The cat looks like a glitchy slideshow, not a walking animal.

Real cartoons run at 24 frames per second — that's a wait of about 0.04. Real video games run at 30 or 60 fps. Scratch can comfortably do 10–20 fps with the wait block, which is plenty for sprite animation.

Pinning the start with switch costume to

Here's a tiny annoying thing. Every time you click the flag, the loop calls next costume — but it starts from wherever the costume was when the flag was clicked. So sometimes the cat starts on costume1, sometimes on costume2. To make every run start the same way, use switch costume to [costume1 v] once at the top:


when flag clicked
switch costume to [costume1 v]
forever
  next costume
  wait (0.1) seconds
end

The polished version. Always starts on costume1. Then animates forever.

Worked Example — the dancing crab 12 min

The cat is fine, but let's do something with more than two costumes. The library has a Crab sprite with two costumes that look like its claws are open and closed — perfect.

Stage plan. The crab (the only sprite you script today — see the ✏️ badge) stays put and cycles two costumes. Same loop you will give the showcase cat next lesson.

Step 1 — Start fresh

New project. Delete the cat. Click the sprite icon, search "crab", add it. The crab appears on the Stage.

Step 2 — Inspect the costumes

Click the crab. Click the Costumes tab. You'll see crab-a (claws closed) and crab-b (claws open). Click each one — see the change on the Stage. That's our animation.

Step 3 — Back to the Code tab

Click Code (top-left). Empty workspace.

Step 4 — The hat

From Events: when ⚑ clicked.

Step 5 — Pin the start costume

From Looks: switch costume to [crab-a v]. Snap it under the hat. Every run will start with closed claws.

Step 6 — The forever loop

From Control: forever. Snap under the switch costume. The C-shape opens.

Step 7 — Next costume + wait

From Looks: next costume. Drop inside the forever. From Control: wait (1) seconds. Drop under it. Click the white circle and change 1 to 0.2.

Step 8 — Click the flag

The crab dances. Claws open, close, open, close, five times a second. Try changing the wait to 0.05 — frantic. Then 0.5 — sleepy. Find a value that looks like an actual crab to you.

The full assembled stack


when flag clicked
switch costume to [crab-a v]
forever
  next costume
  wait (0.2) seconds
end

Five blocks. The dancing crab. Two costumes, one loop, one wait.

What you just built: the engine that drives every animated character in every Scratch game on the planet. Walking cats, flapping birds, swimming fish, exploding spaceships — all of them are some flavour of "loop + next costume + wait". You now own that pattern.

Try It Yourself — three animation drills 15 min

🟢 Easy

Goal: Animate the Ballerina sprite from the library. She has four costumes (ballerina-a, -b, -c, -d) — a complete dance pose cycle. Use the same pattern as the crab. Pick a wait that looks like a real ballerina dancing, not glitching.


when flag clicked
switch costume to [ballerina-a v]
forever
  next costume
  wait (0.15) seconds
end

Four costumes makes a smoother animation than two — your brain has more frames to interpolate.

Think: Try the same script with wait (0.5) seconds. Does the ballerina look like she's dancing, or like she's posing for four separate photos? More frames per second = smoother motion.

🟡 Medium

Goal: Animate the Parrot sprite — but only when the space key is held down. When space isn't pressed, the parrot freezes. Hint: wrap the next costume in an if <> then inside the forever.


when flag clicked
switch costume to [parrot-a v]
forever
  if <key [space v] pressed?> then
    next costume
  end
  wait (0.1) seconds
end

Combines today's lesson with the if-then from L02-06. The wait is outside the if-then so the loop still has a heartbeat even when nothing's being pressed.

Think: What happens if you move the wait inside the if-then? When space isn't pressed, there's no wait, and the loop spins as fast as possible — wasting your computer's energy. Outside-the-if is better.

🔴 Stretch

Goal: Animate a sprite that speeds up over time. Make a variable called delay starting at 0.5. Inside the forever: next costume, wait delay seconds, then subtract a tiny amount from delay (so the next loop waits slightly less). Use the Dragon sprite or anything with 2+ costumes. Add a check: if delay drops below 0.05, reset it to 0.5 so the dragon cycles slow→fast→slow→fast.


when flag clicked
set [delay v] to (0.5)
forever
  next costume
  wait (delay) seconds
  change [delay v] by (-0.02)
  if <(delay) < (0.05)> then
    set [delay v] to (0.5)
  end
end

Think: You just discovered variable timing — animations that get faster or slower. This is how power-ups, panic moments, and slow-motion replays all work in real games. The wait number is just a number; it can be a variable.

Mini-Challenge — Aljay's blurry cat 5 min

"Why does my cat look like a smudge?"

Aljay wants the cat to walk on the spot. He drops these blocks:


when flag clicked
forever
  next costume
end

Aljay's stack. He clicks the flag and the cat turns into a fuzzy blob.

What's missing, and what is the cat actually doing right now?

Reveal one valid fix

The loop has no wait. Scratch is flipping costume1, costume2, costume1, costume2 as fast as your laptop can handle — probably 100+ times a second. Your eyes can't separate the frames, so you see both costumes superimposed on each other. It looks like a smudge.

The fix is one block:


when flag clicked
forever
  next costume
  wait (0.1) seconds
end

Same loop, same next costume — but now each frame stays on screen for a tenth of a second. Your eyes see the two costumes as separate, and your brain fills in "those legs are swapping → that cat is walking". The wait isn't decoration; it's the part that makes animation happen.

Recap 3 min

Animation in Scratch is the same three-block sandwich every time: a loop, a next costume, and a wait. The loop keeps the costumes flipping. The next-costume block walks through the sprite's costume list and wraps around at the end. The wait controls how fast each frame appears — too fast is a blur, too slow is a stutter, and the sweet spot is usually somewhere between a twentieth and a fifth of a second per frame. Pin the starting costume with switch costume to if you want every run to start the same way.

Costume: One of the pictures a sprite can wear. Sprites have a costume list visible in the Costumes tab. Only one costume is shown on the Stage at a time.
Animation: The illusion of motion created by showing a sequence of slightly-different costumes, fast enough that your brain reads them as a moving thing.
Frame rate: How many costumes get shown per second. Controlled in Scratch by the number inside the wait. A wait of 0.1 = roughly 10 frames per second.
next costume: The Looks block that advances to the next costume in the list. Wraps to the first costume after the last — no manual reset needed.
switch costume to: The Looks block that jumps to a specific named costume. Useful for resetting at the start of a run.

Homework 2 min

The Three-Animator Drill. One project, three sprites, three different animations. The goal is to feel how the same pattern works with different costume counts and different waits.

Sprite 1: Cat. 2 costumes. Animate with wait (0.1) seconds.
Sprite 2: Ballerina (from library, 4 costumes). Animate with wait (0.15) seconds.
Sprite 3: Parrot (from library, 2 costumes). Animate with wait (0.05) seconds — fast flap.
All three should start cleanly on their first costume — use switch costume to [...] at the top of each script.

Save as HW-L2-26-Three-Animators.sb3.

Bring back next class:

The .sb3 file.
Your answer to: "Which of the three animations looks the smoothest, and is it because of the costume count, the wait number, or both?"

Heads up for next class: SCR-L02-27 takes today's costume loop and adds move (10) steps beside it — the cat's legs swap while the cat walks forward. That's the classic walk cycle, and it's only one extra block away.