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.

Slow In and Slow Out

Movement usually starts and ends slower than movement in between. Objects accelerate and decelerate. They ease into and ease out of the action.

Your car isn’t doing 60 mph the instant you step on the gas pedal. It doesn’t go back to 0 mph instantly when you step on the break. It accelerates to 60 and decelerates back to 0.

In practice, this means adding more keyframes to the start and end of an animation. It’s not uncommon for anticipation to take up 25 percent of an animation and for follow through to take up a similar amount of time.