Geek

Animation Principles for the Web

As front-end designers and developers, we use CSS to style, position and create great looking sites. We often use CSS to add movement to pages in the form of transitions or even animations, but we don’t usually go much beyond that.

Animation can be a powerful tool to help our visitors and customers understand and benefit from our designs. There are principles we can apply to our work to make the most of this power.

Long established as fundamental working practices at Disney, the 12 Principles of Animation were published as “The Illusion of Life: Disney Animation” in 1981. These principles describe how animation can be used to immerse viewers in a believable world.

In this article I’ll go through each of the 12 principles, and discuss how they might apply when making web pages. You can find the source HTML and CSS on Codepen for them all here.