By Daniel Korpai

Nice visuals and pixel-perfect UI aren’t enough to stand out in a sea of apps. Without animations, even the most thoughtful interfaces can confuse users and make them feel like they’re making choices without context. Good website design includes animations to elevate the user experience of your design to the next level, delivering your users a delightful, satisfying, and smooth 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.

It’s all about focus and attention

The most important purpose of any animation is to provide context and direct the focus of the user for a guided and fluid experience. Animation helps to connect otherwise unconnected screens, so the user never feels lost when navigating and using your app or website. To get the best results from your animations, restraint is key. It’s tempting to get carried away with animations and animate everything on a screen, but this defeats the core value of incorporating motion in the first place.

Use sequences to bring order and hierarchy into your animations. Animating every element at once on a user interface feels like when everybody is talking in a room at the same time.

When you need to animate multiple elements on a screen, always use a short delay between them. Be sure to keep the same easing and duration of the animations, so everything feels consistent. For quick and fluid animations, try to use no more than 20ms delay between animated elements.

Speed is the key to good animations. The speed of the animation is usually controlled by changing the duration of the animation (how long a transition lasts) and by easing (acceleration over time). The duration of animations can make or break the overall user experience.

Well-timed animations are everything.

As a general rule, try to use animations with 0.3s-1s duration. Animations 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. Long animations aren’t much better, though; animations longer than 1s can feel slow and get in the way of interacting with the interface.

A huge benefit of using quicker and snappier animations is that it can make your app feel faster; unfortunately, the opposite is true as well. If your animations are lagging, your app will feel broken, generally slow, and unpleasant to use.

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. 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.

Respect the laws of physics

In the real world, nothing starts or stops instantaneously. Things take time to speed up and slow down, thanks to natural forces like friction. The more naturally an animation behaves, the less cognitive load is required from the user to get used to it and understand its purpose.

Beyond an animation’s duration, though, be sure to get familiar with different types of easing (acceleration over time). Easing types used in design:

Linear: Animation without any kind of easing is the most unnatural type of easing, so use it wisely and only when necessary.

Ease-in: Accelerated easing is animation starting slowly and ending fast.

Ease-out: Decelerated easing where animation starts quickly and decelerates at the end. Ease-out is generally the best choice because the fast start gives the feeling of responsiveness while still providing a natural slowdown at the end.

Ease-in-out: Accelerated and decelerated, similarly to how a car moves. Be sure to use it with shorter animations (around 0.3-0.5s); otherwise, it can feel slow.

Spring: Animation with a bouncing end. Often used in modern apps because of its playfulness and responsiveness.

With the right animations, your app can feel like an extension of the natural world instead of an abstract, strange, or disconnected experience.

Connect animations to interactions

Animations are usually triggered in two scenarios within apps: During/after loading a screen, and when users interact with the interface through swiping, tapping, or dragging.

The type of interaction always determines the type of animation that will be triggered. For example, if the user swipes up on the screen, the animation will reveal the new element with a slide up animation from the bottom of the screen. Another example is when a new screen slides in from the right, the user will expect that navigating back to the previous screen will be possible with a swipe left gesture.

When designing and applying animations, always think about the different interactions that will trigger those animations first.

Use animated prototypes to communicate your ideas:

Implementing animations, especially custom animations, is always a challenge and requires additional effort from both the designers and developers. To make this process as effortless as possible, many designers use high-fidelity prototypes that can be shared with developers, who can inspect and copy the code of the animations.

Using high-fidelity animated prototypes is the most efficient way for designers to communicate their animation ideas, solutions, and requirements with developers.

Be sure to use animations in a consistent way, just like any other visual element. Integrating your animations into your design system can be a game-changer for your overall user experience and design process.

Summary

As you can see, animations are a key piece of creating a great user experience and not just an afterthought. Start thinking about animations and interactions right from the beginning so you can focus on the overall user experience throughout the entire product design process. These principles of animations are timeless, and whether you’re just getting familiar with animations or you already know everything about them, these are some key rules that always worth keeping in mind when designing new animations and interactions.

I can only encourage everyone to start experimenting with animations either for iOS/Android apps or web-based projects. Animations are the most playful part of product design! Hopefully, with these techniques, you’ll be able to elevate the user experience of your design to the next level.