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.

Solid Drawing

The idea behind solid drawing is to take the 3D space into account even while working in a 2D plane. The real world is 3D, and your animations should appear to live in that same world.

Shadows, gradients, scale, and perspective can all add depth to an animation creating the illusion of 3D space. Ironically, the trend toward flat design does the opposite. Fortunately, designers are already bringing back some depth, albeit more subtle than before.

For example, a flat rectangle doesn’t say “button.” Add a slight shadow or gradient, and it looks like something you push or click or tap.