Creating emotion with animation

Creating emotion is the biggest designers’ goal. When we design, we need our product to connect with our audience, we need to touch their heart. It is a great challenge and there are many way to get there. One of them is to make your product alive. If you give it personality, it will be easier for the user to understand your product. Users will be more keen to relate to it, creating a relationship with it. It’s about becoming friend with the user.


To make an interface alive, we can use animation. In Disney Animation: The Illusion of Life, Ollie Johnston and Frank Thomas, two of the animation masters at Disney during the golden age of animation, they showed the philosophy of the Disney animators. It is expressed through 12 basic principles of animation. These principles came as a result of reflection about their practice and through Disney’s desire to use animation to express character and personality.



Good animation is oftenly invisible but it plays a lot in creating emotion. A good balance must be found. Not enough animation, the user can be confused by sudden change.




Too much animation, the user will be disorientated by all the information.

Animation is about the manner you get from point A to B, with what intent. It gives a sense of time, a clue about the past, the present and the future. Animations explain the link between elements. Robots don’t need transitions but the human brain works differently. It needs to be guided.



When a person is using an application, the whole experience is a single continuous space. It’s one element that changes form. When we click on a list container, it shouldn’t just slide in otherwise, it would break the flow. It should instead reveal from its button or popup from the button.




Facebook Paper gets it well. The relation between the thumbnail and the detail page is obvious.




Clear is a to do list app that has great interaction and animation.



Animations create expectations, therefore the flow must be consistent. For example, if a sidebar slides out to the left, you intuitively know that it’s somewhere left of the visible elements. Thus, when it comes back into view, you expect it to come in from the left, where you last saw it.


Motion can provide a lot of information. The interface feels much more lively and more polished. Animation can’t be ignored when designing, we actually should design with it in mind instead of adding transitions between elements. If it is well integrated, the user will feel much more comfortable with it.


Christopher Trang – @yTsoKay Promo Web Design M1

Cover from
color picker, website, swiss style
Publié le 22.10.2015