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.

From the author of

From the author of

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.

NOTE

You can see all 12 principles in action in this video. You can also visit this Tumblr page to watch them all in action at the same time.