12 Principles to Create Realistic Animation the Disney Way
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Transitions and animations are becoming more common on today’s modern websites. They allow designers to smooth changes over time so the changes are less jarring to the viewer.
Hover over a menu item to change its background color. Click a button and an image scales up. Click another button and a panel slides in from off-screen. The key being that none happen instantly, but rather over a few milliseconds.
The duration of the change helps make websites friendlier, but the movement can still be mechanical and somewhat unrealistic. While no one is likely to confuse these transitions and animations with feature films, we can learn from a company that does create full-length feature animations. We can learn from Disney.
Disney’s 12 Principles of Animation
In the 1930s, Walt Disney wasn’t happy with the state of animation at the company. He set up classes for his employees under the direction of Don Graham; from those classes, 12 principles for animation emerged to help animators create more believable animations.
Not every one of the 12 principles is something you’ll directly apply to web pages, but all can help you better understand how to improve any transition or animation you add to a site.