Please enable JavaScript to use CodeHS

Squash and Stretch

In this project, students will create a JavaScrirpt animation of a ball bouncing. They will extend this with a traditional animation technique where the ball squishes and stretches as it moves through the bounce.

Medium

3 Hours

High School

Project Description

Legendary Disney animators Ollie Johnston and Frank Thomas wrote about 12 basic principles of animation. In their book, the first principle they described is the concept of squash and stretch.

Their idea is that most objects in motion do not stay rigid. While objects retain their volume, they tend to change their shape based on inertia and elasticity.

By adding a squash when an object hits a static body and a stretch as it moves quickly, you can give an object a sense of weight and speed as it is moving. When taken to an extreme, you can add a comical effect to the animation.

Applying the principle of squash and stretch to a bouncing ball was one of the first tasks Disney animators would practice. In this project, you are going to look at applying a basic stretch and squish to a bouncing ball animation.

Project Demo

Explore this program before assigning it!

Project Overview

Here is an outline of the project activities: