Enhance UX with Animations

by KikkertTorben 2015.02.13

I would like to talk about how Animations in Apps can help enhance the user experience.


Animations can bring life (personality / character), emotion (fun, serious etc.) and attention (Visual attention) to the App. Animations in Apps has been around for years, and smartphones had standard animations for screen transitions, button clicks etc. for a long time. But in recent years custom animations have been used more and more to enhance the user experience and give the different Apps an edge over its competitors.


250px-Book_the_illusion_of_lifeLong before the smartphone, animations were used to bring life to cartoon characters. In 1981 Disney published the book The Illusion of Life, it contained Disneys 12 basic principles of animation. The same principles help App creators create custom animations with purpose to enhance the user experience.


1. Squash and stretch
2. Anticipation
3. Staging
4. Straight Ahead Action and Pose to Pose
5. Follow Through and Overlapping Action
6. Slow In and Slow Out
7. Arcs
8. Secondary Action
9. Timing
10. Exaggeration
11. Solid Drawing
12. Appeal


To demonstrate some examples I would like to use Facebook Paper, created by Facebook Creative Labs.


Staging example


Secondary Action example






popThe tools or libraries for implementing these animations in Apps has also evolved. Libraries like facebook pop (used to drive the animations in Facebook Paper) and spring has made it more simple to implement animations.

Here is a simple example of a spring animation using facebook pop in an iOS swift project.






Links to some of the resources used in this blog post :






Other links :