Animating a Bouncing Character

Learn how to make a cartoon character look like it is jumping up and down on a computer using simple animation steps.

Reading is good — doing is better. Practice Animating a Bouncing Character as an interactive lesson.

Definition

Animating a bouncing character means giving a drawing or sprite a series of pictures that show it moving up, then down, over and over, so it looks alive and bouncy on the screen.

Remember the rule

Up → Squish → Down → Stretch → Repeat! A good bounce goes UP, lands and SQUISHES flat, then STRETCHES tall as it rises again.

Key words

Animation: A bunch of pictures shown quickly one after another to make something look like it is moving.
Sprite: A character or object picture that you can move around on a computer screen.
Frame: One single picture in an animation, like one page in a flip book.
Loop: When an animation plays again and again from the start without stopping.
Sequence: The order that your frames or steps go in, like first, second, third.
Speed: How fast your frames change; faster speed makes the bounce look quicker.
Costume: In many kids' coding tools, a costume is one drawing or look of your sprite that you can switch between.
Block: A puzzle-shaped coding piece you snap together to give your sprite instructions.

Worked examples

You want your cat sprite to move up 50 steps and then come back down. What two move blocks do you use?

→ First use a 'change y by 50' block to move the cat up, then use a 'change y by -50' block to bring it back down. · In most kids' coding tools, making the y number bigger moves a sprite up and making it smaller moves it down.

Your character bounces but it only does it one time and then stops. How do you make it keep bouncing?

→ Wrap your bounce steps inside a 'forever' loop block so the up-and-down movement repeats over and over. · A forever loop is like telling the character to never stop following those instructions.

You have 3 costumes: cat standing tall, cat squished flat, cat stretched up. In what order should you show them for one bounce?

→ Show: 1) cat stretched up, 2) cat standing tall, 3) cat squished flat, 4) cat standing tall again. Then repeat. · Squishing when landing and stretching when rising makes the bounce look real and fun.

Your bounce looks too slow. What one thing can you change to make it faster?

→ Lower the number inside your 'wait' block, for example change 'wait 0.5 seconds' to 'wait 0.1 seconds'. · Less waiting time between frames makes everything happen quicker.

Your sprite bounces off the top of the screen and disappears. How do you fix it?

→ Make the y change number smaller, for example change 'change y by 100' to 'change y by 40' so the sprite does not go too high. · The screen has edges and sprites can move past them if the numbers are too big.

You want your character to look happy when it goes up and tired when it lands. How can you show that?

→ Switch to a smiling costume when the sprite moves up and switch to a droopy-face costume when it comes back down using 'switch costume to' blocks. · Changing costumes at the right moment makes your character feel full of personality.

Common mistakes

Forgetting to add a loop, so the bounce only happens once and then stops.
Using a y number that is too large, which sends the sprite flying off the top of the screen.
Putting the costume switch block in the wrong place in the sequence, making the character look wrong at the wrong time.
Forgetting to click the green flag to start the animation before wondering why nothing moves.
Setting the wait time too long, making the bounce look very slow and choppy instead of smooth.

FAQs

What is the difference between moving a sprite and animating it?

Moving a sprite just changes where it is on the screen. Animating it means you also change how it looks, like switching costumes, so it truly seems alive.

Does my character have to go straight up and down to bounce?

No! You can also make it bounce side to side or at an angle by changing the x number along with the y number.

Why does my sprite look like it is teleporting instead of bouncing smoothly?

You probably need more frames or smaller y changes so the movement is in tiny steps instead of one giant jump.

How many costumes do I really need for a bounce?

You can make a simple bounce with just one costume by only moving the y position, but using 2 or 3 costumes with stretch and squish looks much more fun.

Can I add a sound when the character hits the ground?

Yes! Place a 'play sound' block right after the sprite reaches its lowest y position so a thud or boing sound plays on every landing.

What coding tool is good for making a bouncing character in 2nd grade?

Scratch Jr on a tablet or Scratch on a computer are both great free tools made just for kids to drag, snap, and animate sprites easily.

Want the whole picture for your child?

Every K–6 subject, an AI tutor that teaches step by step, unlimited practice, and a reward world.

Start a 3-day free trial