Please note: This theme has not been updated to reflect Scratch 3.0. Visit this help article for more info.

(upbeat music)

What's up, animators?

Welcome to activity three of Google CS First Animation.

Today, you will use functions to create a straight-ahead animation story.

All animations are created by drawing one picture frame at a time, each slightly different.

Sometimes, the animator first draws the beginning frame, the end frame, and the key action frames in between.

The artist then draws frames between them to fill in the gaps.

This is called keyframe animation.

In straight-ahead animation, artists draw each frame in order, from the beginning to the end.

(pencil scratching)

(spring boing)

Straight-ahead and keyframe animations are only two important aspects of animation.

Watch this video to see some important animation principles.

(upbeat banjo music)

The following has been paraphrased from the Illusion of Life, by Frank Thomas and Ollie Johnston.

Squash and stretch.

This action gives the illusion of weight and volume to a character as it moves.

Anticipation prepares the audience for a major action the character is about to perform.

Each major action is proceeded with specific moves that anticipate for the audience what is about to happen.

Staging, it's the presentation of an idea so that it is clear.

Straight-ahead and pose to pose.

Pose to pose is charted with key drawings done at intervals throughout the scene.

(metallic pings)

Straight-ahead animation starts at the first drawing and works, drawing to drawing, to the end of a scene.

Follow through and overlap.

When the main body of a character stops, all other parts continue to catch up to the main mass.

Nothing stops all at once.

(lively glockenspiel music)

That video was pretty cool.

Professional animators use these principles to guide their work.

Today, you will focus on how the computer science concept of functions makes straight-ahead animation easier to create.

You can reuse code from one picture to the next as you build your animation, instead of starting from scratch every time.

The function you will build today looks like this.

But, if you were to build the same code without using the functions, the code would look like this.

Today, you can choose between the three starter projects, linked next to this video.

Each starter project has a backdrop and an andriod sprite with three different sets of costumes.

Choose the starter project you like the best.

The example in the videos will use the happy, basketball, and sleepy android project.

Now it's your turn: choose one of the three starter projects.

Sign in using the information in your CS First passport, and click remix.

Then, return to this page on the CS First tab, click the green next arrow, and move on to the next video.


  1. Choose a starter project to remix.
  2. Remix the starter project.
  3. Sign in to Scratch using the information in your CS First passport.
  • "Secret Recipe Ep. 6: Whiteboard Animation" by Animation Chefs ( -- Licensed by Creative Commons Attribution 3.0 Unported ( -- Video trimmed to needed length
  • "CSS animation guide for novices" by Nirdosh (
  • "The illusion of life" by cento lodigiani ( -- Licensed by CC BY 3.0 (