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.

Arcs

Most movement in the natural world occurs over an arc. The movement isn’t a perfect straight line. You want to have movement follow arcs as opposed to straight lines where possible.

The shallower the arc, the faster the object will appear to move and the more pronounced the arc, the slower the object will appear to move. Keep in mind the arc of motion can be around any axis, which might mean into and out of the screen.

Mechanical movement is the exception to this principle. It’s typically less curved and more linear than organic movement.

Figure 3

Figure 3 Arcs

9. Secondary Action | Next Section Previous Section