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.


The key to good animation is timing. Slow in and out is a subset of this principle. The timing you use in an animation should give a sense of the object’s characteristics: how heavy or light is it, for example.

Timing can communicate a lot. A person blinking quickly might be seen as alert, whereas a person blinking slowly might appear tired. Changing nothing more than how quickly the eye blinks can help communicate the emotional state of the character.

More than anything, timing is something you should experiment with when creating transitions and animations. Trial and error and your own judgment will go a long way here.

11. Exaggeration | Next Section Previous Section