Forming the basis of animation work, these principles are relevant for a number of different fields. For instance, when introducing motion into your interface. Let's explore how some of these principles can also be applied to interface animations.

It gives your animated characters and objects the illusion of gravity, weight, mass and flexibility. Think about how a bouncing rubber ball may react when tossed into the air: the ball stretches when it travels up and down and squishes when it hits the ground.

In interface, squash & stretch can be applied to buttons.

Anticipation helps to prepare the viewer for what's about to happen. When applied, it has the effect of making the object's action more realistic. Consider how if might look if you were to jump in the air without bending your knees.

In interfaces, hover states are great examples of this. Whenever we hover over elements, certain elements react indicating that it’s clickable and something is going to happen when you click on it.

Staging in animation is a lot like composition in artwork. You should use motion to guide the viewer's eye and draw attention to what's important within the scene.

In interfaces, staging decides where the elements are placed and how they are choreographed when an interaction happens. It directs the user’s attention to the intended element.

Add some exaggeration to your characters and objects to make them more dynamic. Find ways to push the limits just beyond what's possible, and your animations will pop.

In interfaces, important interactions can be exaggerated to gain users’ attention.