Skip to content

This add-on walks you through how to program your model to animate when you place an accessory on it.

In this example, the model sprite turns its head.

First, we'll need to edit your model in the Backdrops Editor, then code your program.

To begin, click on the Stage Backdrop image.

Then click on the Backdrops tab above your Code menu.

Here you can modify or customize your backdrops for any project.

To start editing, right-click on the backdrop in your program, and click Duplicate.

Now there are two copies of your backdrop.

The tools on the side of the image allow you to edit the backdrop.

To change the way the model looks, click on the Select tool, then click on the model.

To work with separate pieces of the sprite, click the Ungroup tool.


All the shapes are separate, so you can change the different shapes that make up the model.

This example modifies the head.

To move a group of shapes all at once, click near the shapes, then drag the Select tool around the shapes that you want to group together.

Then click the Group tool.

To rotate the head, click and drag the circle.

Play around with the selected area to blend it with the rest of the image as best you can.

The smaller the changes you make to your image, the smoother the animation will look.

If you don't like what you did or would like to go back a step, use the Undo button at the top of the Backdrop Editor.

Next, if you'd like, duplicate another backdrop image and modify it.

The starter project contains both a male and female model.

Delete the model that you aren't going to animate.

To add it back later, go to the Image Library on the CS First website.

To code the animation, click on your accessory sprite.

Since you modified the backdrop, drag out a switch backdrop block from the Looks menu.

Click the drop-down menu and select next backdrop.

When you click this block, it'll cycle through the different backdrops of your model that you created.

For your model to appear animated, drag out a repeat loop.

Place it around the switch backdrop block, and add a wait block inside the loop.

Tinker with the values in the repeat loop in the wait block until you like the way the animation looks.

This example repeats the backdrops three times since there are three different costumes and uses a wait time less than one second, so the loop happens very quickly.

This makes the animation look smooth.

Test your code.

When you click on the new block stack, your model should appear to animate.

Finally, place this block stack under the stamp in your original code.

Now your model will react once you place an accessory on it.

Try it out!

Now it's your turn.

Duplicate your backdrop and make small modifications to the image.

Remember that you can undo any changes in the Backdrops Editor.

Add a repeat loop, a switch backdrop block, and a wait block to animate your model.

And place this code stack under the when space key pressed and stamp code stack.

Once you're done coding this add-on, share your project animation with your neighbor.

Choose an Add-On

Flashy Mouse

Program your stylist tool create a colorful trail as it moves around the screen.

Stylist Game

Make your stylist tool into a game that lets the user race against the timer to style the model.

Animate Model

Program your model to animate when you place an accessory on it.

Stylist Critique

Create a stylist critic and program it to give feedback for the stylist project.

Sound (Challenge)

Add sound to your project.


  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!