Scratch

Beginner

40 mins

Teacher/Student led

What you need:
Chromebook/Laptop/PC or iPad/Tablet

Backgrounds in Motion: Scene Transitions

In this lesson, you'll learn to make your Scratch projects more engaging by animating backgrounds and creating smooth scene transitions. Follow the steps to bring a city bus journey to life with dynamic visuals and effects.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction
2 Create a new project
3 Add the Scratch Bus
4 Set the Starting Background
5 Placing the Bus
Challenge
Quiz

1 - Introduction

In this lesson, we’re going to explore how to make our Scratch projects more dynamic by using moving backgrounds and scene transitions.

Imagine a city bus driving through different parts of the city—now you can bring that to life in your project! By the end of the lesson, you’ll know how to animate a background and create smooth transitions between different scenes

2 - Create a new project

Scratch: How to create a new project

Go to the Scratch website using the link below and click on the 'Create' link in the blue bar at the top.

By default, each new project starts with the cat sprite already added. To delete the cat click on the x in the blue circle beside the cat in the sprite list.

https://scratch.mit.edu

3 - Add the Scratch Bus

Start by deleting Scratch the Cat and adding the Scratch City Bus sprite from the sprite library. This will be the vehicle that moves through your scenes.

Scratch: How to add a sprite from the library

To add a sprite from the sprite library follow these steps:

Put your mouse over the Choose a Sprite button
Click on the magnifying glass
Find the sprite you want in the library
Click on your chosen sprite

You can use search box or the filter links (Animals, People, Fantasy etc) to locate your sprite.

4 - Set the Starting Background

Choose the first background from the backdrop library. Let’s start with a city street.

This will be where the bus begins its journey.

Scratch: How to add a backdrop from the library

To add a backdrop from the backdrop library follow these steps:

Put your mouse over the Choose a Backdrop button
Click on the magnifying glass
Find the backdrop you want in the library
Click on your chosen backdrop

You can use search box or the filter links (Fantasy, Music, Sports etc) to locate your backdrop.

5 - Placing the Bus

Click on the Scratch Bus sprite to start coding. Begin with a "when green flag clicked" block from the Events section. Underneath, add the "go to x: y:" block from the Motion section to place the bus at the starting point of the background. Set the x value to -140 (left edge of the screen) and y to -100 (near the bottom of the screen).

when green flag clicked
go to x:[-240] y:[-100]

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started

Copyright Notice
This lesson is copyright of Coding Ireland 2017 - 2025. Unauthorised use, copying or distribution is not allowed.

Scratch is developed by the Lifelong Kindergarten Group at the MIT Media Lab. It is available for free at https://scratch.mit.edu

Your Answer or Description of Your Work

Project URL This can be a link to your project (e.g. a Scratch, Microbit, Arcade or CodePen URL link).

Upload File

You must be logged into Scratch to share your project, otherwise the link will not work.

To get the URL link of your Scratch project:

Make sure you're logged into Scratch.
Click on the Share button in the project editor.
Click on the Copy Link button.
Click on the Copy Link link. This will save the URL of your project page into your clipboard.

To get the URL link of your Microbit project:

Click on the button in the project editor.
Click on the Publish Project button.
Click on the Copy button. This will save the URL of your project page into your clipboard.

To get the URL link of your Arcade project:

Click on the button in the project editor.
Click on the Publish Project button.
Click on the Copy button. This will save the URL of your project page into your clipboard.

To get the URL link of your CodePen project:

Make sure you're logged into CodePen.
Open your project in the editor.
Click on the Save button at the top of the editor.
Copy the link from the address bar in your web browser (e.g. https://codepen.io/Jane-Smith/pen/gOVXxBQ)

Backgrounds in Motion: Scene Transitions