During my study, I have read the book “The illusion of life” about the principles of movie animation. This book is written by Frank Thomas and Ollie Johnston in 1981. They were one of the first employees of Walt Disney Studio. Animation is more important now for websites and I tried to make the translation between movie animation and web animation (CSS animation) with the 12 principles in mind.

Squash and Stretch

Squash and stretch gives an object more volume when it moves. When an object goes down, then you will stretch the object to simulate the gravity. When the object touch the “ground” then you emphasize it by squashing the object.

Anticipation

Prepare the user that something is going to happen to an object. When the user hover over an icon, make sure that the animation has a startup before the animation starts.

Staging

Make sure that the positioning of the object that animates is good, so the message of the animation is good and clearly comes out.

Pose to Pose

Use keyframes to make the animation run smoothly and ensure the correct pose in a keyframe.

Overlapping Action

When the primary object stops then will the secondary objects will stop later. Nothing will stop at once.

Slow In and Slow Out

If you want to express an object which could be heavy, use slow-in and slow-out. That gives the user an idea about what the element implies.

Arcs

Arcs gives an animation a more natural focus and a better flow. Especially when an object is to animate forward.

Secondary Action

When a secondary object is stuck to a primary object and the primary object animates, make sure that the secondary object also animate when been touched by the primary object. Because of this you create more dimension to your animation.

Timing

Keeps track of timing the laws of physics in mind. How should you animate a heavy object or a light object.

Exaggeration

Do not stay too close to reality, but animate the objects wilder and more extreme. In order to attract more attention from the user.

Solid Drawing

Give your objects more volume by adding 3d elements. This puts your objects to life.

Appeal

Appeal is the quality of the charm, be able to please the human eye. Appeal is the charisma of the animation. Make sure that the animation runs smooth and clearly conveys the message.

How to use it in practice

Below are a few examples of how animations can be used in practice.

Conclusion

Animations help to clarify navigation flows or important objects on the website. The 12 principles help to make the animations more closely to the natural laws that are increasingly important in the sense of animation and the animation brings to life.


17,559 9 155