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.

Follow Through and Overlapping Action

In the section on anticipation, I mentioned that animation occurs over three steps and that the last step was follow through.

Follow through is similar to anticipation, except it occurs after the action instead of before it. Things don’t stop suddenly in the real world any more than they start suddenly.

When throwing a ball, your arm continues its motion after releasing the ball. When a ball bounces on the ground, it doesn’t stop. It continues bouncing until eventually coming to rest. Both are examples of follow through.

Overlapping action is similar. An example is your arms swinging as you run. The running is the major action and your swinging arms overlap it. The overlapping action should usually move at different speeds than main action.

7. Slow In and Slow Out | Next Section Previous Section