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.


Real-world actions don’t start immediately. An action in an animation occurs in three steps:

  1. Set up for the action
  2. The action
  3. Follow through on the action

The setup is anticipation, which is typically a movement in the opposite direction (contrary movement) to the action.

For example, to throw a ball, your arm winds up and moves back before moving forward to release the ball. This windup is anticipation. It signals the action to come and leads the viewer’s eye to the object that will perform the action.

Anticipation is often the most important part of any animation. It’s also the part that typically lasts the longest. The greater the action, the longer and more exaggerated the anticipation should be.