Home / Articles / 12 Principles to Create Realistic Animation the Disney Way

12 Principles to Create Realistic Animation the Disney Way

Article Description

Transitions and CSS animations can help make websites friendlier, but their movement can be mechanical and somewhat unrealistic if not handled well. Website designer/developer Steven Bradley shows how designers can take a cue from the animators at Disney and the 12 principles of animation they follow, and apply to all their work.

Squash and Stretch

Three-dimensional (3D) objects have mass and volume, and they exhibit a certain amount of rigidity when moving. Real objects deform slightly during movement, revealing how rigid they are.

Organic objects aren’t completely rigid. They’re usually softer and more malleable. When the movement of organic objects is stiff and rigid, it doesn’t feel right. Man-made objects, on the other hand, tend to be stiff and rigid.

The principle of squash and stretch is about showing objects flattening and elongating as they move to reveal their rigidity. The object should appear to retain its mass and volume, but it should also deform to appear more natural.

For example, a bouncing ball will squash when it comes in contact with the ground, and then it will stretch after the bounce, elongating in the direction of movement (see Figure 1).

Figure 1

Figure 1 Squash and stretch

3. Anticipation | Next Section Previous Section