This tutorial shows you how to create animations in Scratch. It does this by taking you through a step-by-step procedure to create an animated sprite - i.e. one of the images or characters that populate the Scratch universe. The lesson will cover the basics of working with Scratch to develop animations. It assumes no prior knowledge of scratch coding by a learner. By the end of this tutorial, learners should have a basic familiarity with the Scratch program and its interface. Also, they should be able to recognize and identify basic commands and processes required for working in Scratch. Again, they should be familiar with the steps involved in creating simple animation using the Scratch platform. As an interactive programming platform and language, the Scratch program is intended to help improve your learning experiences by enabling you to think creatively and critically. It will also help you develop skills in working easily and well with others. For more on the Scratch platform,
check out their website here. We would be going through the activities in this tutorial one step at a time. As such, the pace of delivery may be slower
than most learners are used to. Below is an image of the Scratch GUI, which I describe in the next section
Now, we will explore the Scratch generic user interface (GUI). To do this:
- Navigate to the Scratch web platform by either typing https://scratch.mit.edu/ into your browser console, or by using Google search to navigate to the official Scratch web page
- If you already have an account, go to the top right corner of the page and sign in. Otherwise register for a new account by going through their simple, straightforward account registration process
- When you are ready to begin, move your cursor to the top left corner of the page, locate the tab named Create, click on it, then wait for the new page to load.
Looking at the Scratch interface for the first time, you notice that there are so many tabs and components. However, we will focus on the main ones which are described in the table below:
Component | What it does |
---|---|
Menu | Used to save and load files |
Code Blocks | Contain reusable code blocks to control and add behaviour to your program |
Script Editor | This is the area where you build or develop your code logic |
Stage | This area displays your program's execution outputs |
Program Control | This feature allows you to control the starting and stopping of your program |
Sprite Control | Allows you to add, update, remove and define sprites |
Backdrop Control | This feature allows you to add, update, remove or define backgrounds |
The following image provides a more concise and detailed overview of the Scratch GUI:
We will learn about the various components identified above as we move along in our lessons
We will start off our project by selecting a SPRITE we would like to animate. Normally, the default sprite is the cat character which loads automatically when the Scratch program is started. However, you can change this by moving your cursor to the panel named SPRITE CONTROL, sometimes called the SPRITE INFO PANE. This is a panel that shows all the information about our sprites and also allows a user to manipulate sprites. Users can make sprites active, or can create or delete sprites from this pane. Clicking on the blue button with the white cat face at the bottom right side of the panel will bring up an option to choose a sprite from among several.

Now we will add a background, to give our setting a real-world feel. To do that, let us move our cursor to the BACKDROP CONTROL panel and click on the blue button with the picture icon located at the bottom of the panel. This will bring up a list of backdrop options to choose from
It is now time to animate our sprite which we will do in the next section
We are going to animate our Sprite - Dog2. To that, move your cursor to the CODE BLOCKS panel, and click on the Events tab located 4th from the top (having a round yellow button)


See gif below for reference
We are almost done.
- Now move the cursor to the CODE BLOCKS panel again, then select the Looks option from the list of codes (it is the purple button located 2nd on the list from the top)
- From the list of options in the Looks code, on the right, select Next Costume, and drag it into the SCRIPT EDITOR panel. .
- Insert it into the Control option, forever. See the gif below on how to do this
Now, the last but not least, step
.- Move your cursor to the CODE BLOCKS panel one last time and select Control from the options on the left.
- From the list of Control options, select the one which looks similar to this button
(NOTE!! it is the first option on the list)
- Now drag it to the SCRIPT EDITOR, then hover it near the bottom of the Next Costume option. The pane will automatically open to allow you to insert the button into it.
- Once this is done, click the number 1 on the button, when it becomes highlighted, click the backspace of your keyboard to delete it and enter the following figure to replace it: 0.1. See the clip below on how to complete this
- To see how it works, move your cursor to the PROGRAM CONTROL
panel and click on the green flag icon option that looks like this image
- Upon clicking on the icon, you should see our sprite, Dog2, animated in a manner similar to the clip below
- To stop the animation, click the red octagon icon next to the flag icon on the PROGRAM CONTROL panel
- Now, lets save our project. To do this, we move our cursor to the menu bar at the top, and then click on the tab labeled Untitled-#.
- Doing this highlights the label, and we can either delete it outrightly or edit it with a preferred label. I will label my project Dog2 Animation
- So, that's it. Thanks for sticking around for this tutorial
Congratulations!!!. We've created our first sprite animation in Scratch.
In this lesson, we familiarized ourselves with the Scratch program and GUI. We then created an animated sprite by first choosing a sprite then selecting a backdrop, and then used various menu functions to animate our sprite
To learn more about Scratch, check out the following free resources:
- Google's Code to Learn Contest 2020
- Step-by-Step tutorial created by Scratch MIT
- EDX Course (Free online)
- Class Central