Have you ever wondered why one website looks better than others? Or a mobile app? Why are some things more appealing to you than others? Well, on the obvious part one has better UI and visuals, on the not so obvious it’s because of animation; just look at PlayStation or Xbox’s interface, or Uber or Alexa’s Home Screen. Those apps have incredible motion design, so well implemented and subtle that we don’t notice it, but the appeal animation gives, the joy of moving through the interface is what makes those products awesome.

I don’t wanna get too historical or technical here but I will (just a little). Animation is the art of moving static images to simulate the feel of motion and life. It has more than 100 years of development and it has been one of the most important forms of art; from Disney features films to TV Commercials and Cartoons to our modern times on the web and digital products.

But how can animation be so appealing to us? Well, it’s simple: It gives us a feeling of familiarity. The objects that we see on the screen have properties that can exist in the real world. In other words it gives life to things. As icons in the 80’s strived to be similar to objects in the real world, animation does the same; it can be as complex as giving a character a personality or as simple as changing the shadow of a button to simulate that it is pressed on click, or changing its state slightly when it is hovered.

Now you know what animation is and how it can help on visual projects. But for applying it you need to know a little bit about the technical stuff. Here’s a list of rules (in my opinion) that can give you a first start on understanding and implementing motion on your digital projects.

The 12 Principles of Animation

In the Golden Age of animation some animators at Disney (yeah, Walt Disney) came up with the idea of developing these principles that help animators, well, do good animation. It has rules and best practices of how and why things should move (You can learn more here). Even though these rules have been around for almost 100 year, they include practices that continue to apply in modern times. Timing, Ease In/Out, Anticipation and Secondary Action are just some of the 12 principles that I’ll be explaining In the next paragraphs and that I think are the ones that are basic for modern interactions.


Timing

This one is really easy. The most basic and also important principle is Timing. This principle is about the duration of an object’s motion and how it must “respect” physics laws to seem more real to the audience. It may sound difficult but it’s not; It means that the speed of an object should be just right to not be seen as fake. On CSS animation, setting a duration for a transition can help a component be more appealing with the right timing. If the motion is too short or is too long, even if it has an awesome design, it can look out of place. Bad timing can make the final result look low quality and even ruin the design.

This is an example of bad timing. Animation is too slow at the beginning and has a long duration.
Example of good timing.



Ease In and Out

The most popular of the principles and in my opinion the most used across the web. This principle says that objects on the real world don’t accelerate from 0 to 100 right away and on the reverse objects on the real world don’t slow down from 100 to 0 right away. Everything gradually gets velocity and gradually decreases it. It means objects don’t move with linear speed, it takes time to gain speed and to slow down. The most common use of this on digital animation is the “timing-function” property where you can set a “motion curve” to slow in or out the objects on a screen.


Image by Wink Animation Studio

Anticipation

Anticipation means preparing the audience for an action. A simple example can be having hover states on a button that moves an arrow to the right meaning that it’s going to take you somewhere. Or moving an element a little bit to left or right when navigating on a slider. The purpose is to give the users feedback than something can be done or is going to happen. This prevents the user from feeling confused when something happens on the screen.

On this example we anticipate the slider by showing the slight movement of the elements on hover. 

Secondary Action

The secondary action principle is that with a big main action there should be a less prominent motion that complements it. This helps to give more appeal to the main action and create a sense of strength to it. An example of this can be a card fading up to the screen and a delayed fade in of the content; the primary action is the appearing of the card and the secondary action is the content fading in a little bit later. Doing this can add appeal to your items and a feel of comfort to your products; but remember: Always think about timing.



These are the principles that in my opinion can help improve the appealing of your designs and interaction. So, when creating your prototypes on Principle, After Effects or any other tools try to think of them from the beginning. How can you apply this to your current design? Why does my animation look so fluffy? Question yourself and start thinking about motion and improving your interactions. It doesn’t matter if you are a Designer or a Developer. You just gotta get the perfect timing.

Don't forget to follow me on Instagram as @eleduardoreyes and Dribbble @eduardoreyesza to see more about my animations and some cool stuff.

Arigato.