Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

arrow_back Animate


In this video, you’ll learn how to animate the androids representing you and your friend.

Animations occur when a series of still pictures with small changes are shown one after the other quickly.

This animation was created by switching between these costumes.

To animate the sprites in your story, you need to create the costumes.

To do this, click on one of the androids, then on the “costumes” tab.

You are now in the Scratch paint editor.

You can use the paint editor to change how your sprite looks.

First, remove the costumes you don’t want to be part of your animation.

To delete a costume, select it, then click the x in the upper right corner.

Now, create a copy of a costume to change.

You’re going to “edit,” or change, the sprite’s costume so it looks like it’s dancing.

To do that, right click on the costume, and select “duplicate.”

You now have a copy of the costume to work with.

In this example, the last costume was duplicated in order to continue the animation.

Next, you’ll learn about the cool stuff you can do to edit sprites!

Use the “select” tool, and click on the sprite.

You’ll know that you’ve selected the sprite when you see a box around it.

With the sprite selected, you can move it by clicking and dragging, rotate it by dragging the circle on top of the sprite, or change its size by dragging the squares on the corners and sides.

If you make a mistake while editing the sprite, that’s okay!

Computer scientists make mistakes all the time, and they use those mistakes to learn what they should do differently next time.

You can use the “undo” button to undo your last action.

Then, try again until you have something you like.

Now you can move, rotate, and resize your sprite.

But, it would be nice to be able to change only one part of the sprite, like its arms or legs.

To make that happen, select the sprite, then click the “ungroup” button.

The sprite now splits into many parts that you can move, rotate, or resize individually.

Move the arms and legs a tiny bit to create your first animation frame.

There is one more drawing tool to try: the “reshape” tool.

Use this tool to edit points and lines.

For example, click on the “reshape” tool, then on your sprite’s hair.

Drag the points and lines on the sprite’s hair to make it move.

Once you are happy with your new frame, duplicate the costume you just created, then make further changes to it to create your second frame.

Repeat this process until you are happy with your animation.

Test the animation by clicking quickly between costumes.

To program Scratch to animate for you, click on the “scripts” tab.

Then, from the “looks” menu, place a “next costume” block in the scripts area.

Click on it.

The sprite changes costume!

To make the costume keep changing, from the “control” menu, place a “repeat” loop around the “next costume” block.

Click on the code to run it.

The sprite changes costume really quickly.

Slow it down by going to the “control” menu and placing a “wait” block inside the repeat loop.

Tinker with the values until you like the animation.

Finally, add the animation to your story.

Place the loop wherever in your code you want the animation to happen.

This example’s animation shows a dance.

The sprite dances as soon as she meets her friend.

Now it’s your turn!

Create an animation for your sprite Try the following tools: Select Undo Ungroup Reshape Program the animation using “repeat” “next costume” and “wait” blocks.

Tinker with the values.

Place the animation anywhere in your code that makes sense.

Choose an Add-On
Add a Soundtrack
Add music to run in the background of your project.
Changing Backdrops and Costumes
Add different scenes to your story.
Changing Looks with Code
Learn what the "looks" blocks can do.
Move Around the Stage
Discover ways to make sprites move.
Animate sprites by creating new costumes.
Secret Password
Make a password to protect your story.
arrow_backward Back
Next arrow_forward
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!