Linear: Animation without any kind of easing.

This is how spring animation should work ( GIF by Ehsan Rahimi)īeyond an animation’s duration, though, be sure to get familiar with different types of easing (acceleration over time). The more naturally an animation behaves, the less cognitive load is required from the user to get used to it and understand its purpose. Things take time to speed up and slow down, thanks to natural forces like friction. In the real world, nothing starts or stops instantaneously. For example, when swiping between images, if there’s a lag between the swipe gesture and the beginning of the animation, the complete experience is ruined and quickly swiping between images will feel like an impossible task to do.

Speed isn’t only applicable to the duration of the animation, but also to the lag between the trigger gesture and the beginning of the animation. If your animations are lagging, your app will feel broken, generally slow, and unpleasant to use. Long animations aren’t much better, though animations longer than 1s can feel slow and get in the way of interacting with the interface.Ī huge benefit of using quicker and snappier animations is that it can make your app feel faster unfortunately, the opposite is true as well. ( Unsplash concept by Charles Patterson)Īs a general rule, try to use animations with 0.3s-1s duration.Īnimations shorter than 0.3s can feel almost nonexistent, since it’s easy to miss the transition-and, when the user does notice them, that speed can cause stress and confusion in the user. The most important jobs of any animation in your app are to provide context and direct the focus of the user for a guided and fluid experience. In this article, my goal is to collect all the key principles that are indispensable when creating animated interfaces regardless of which tool, framework or techniques you’re using. Good animations elevate the user experience of your design to the next level, delivering your users a delightful, satisfying, and smooth experience.Īnimations, sometimes with the combination of sound and haptic feedbacks in case of mobile apps, make the abstract experience of using an app more tactile and closer to reality with reduced cognitive load, since the user can recognize all the connections and context quicker when using the app.

Without animations, even the most thoughtful interfaces can confuse users and make them feel like they’re making choices without context. Nice visuals and pixel-perfect UI aren’t enough to stand out in a sea of apps.

Principle app easing