Nick Babich has … in his post about mincrointeraction
“The best products do two things well: features and details. Features are what draw people to your product. Details are what keep them there. And details are what actually make our app stand out from our competition.”
I’m not an animation expert, but I always love small details that bring joy to people. And for me, the animation is one of the best techniques for providing delightful feedback.
You can find many cool articles about animation, very detailed and completed. This article is just to list down the very basic rule of animation that I’ve learned and applied.
My north star animation principle: The animation in the interface should reflect the movements that we know from the physical world — friction, acceleration, etc.
That leads to two main attributes/ingredient of UI animation: Ease and Timing
Ease
Easing defines how animation changes speed throughout the action. In the real world, objects tend to accelerate and decelerate as they move.
Ease-in
Ease-in is slow at the beginning, then faster gradually.
We should use this ease when the objects fly out of the screen at full speed, eave the screen forever and we cannot recall or return them.
Ease-out
In contrast to ease-in, ease-out is slow at the end.
We use this curve when the element emerges on the screen — it flies up on the screen at full speed, gradually slows down (to get attention) until it completely stops.
Ease-in-out
Whenever you doubt what type of motion to use in your animation, use the standard curve.
Use this ease when the objects move from one part of the screen to another. In such a case, animation avoids the eye-catching and dramatic effect.
When to use linear
Objects that are not affected by any physical force move linearly (constant speed), we use linear easing. e.g: rotation
Timing
When elements change their state or position, the duration of the animation should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.
Numerous researches have discovered that optimal speed for interface animation is between 100 and 500 ms.
Rules of thumb:
- Enter is always longer than exit
- Timing depends on the area of transition
- Small transition areas have short durations
- Large transition area have longer durations
Enter & Exit
Timing depends on transition area
Note: Web animation is treated differently. So, the duration of web transitions should last about 2 times shorter than on mobile devices.
Colophon
If the animation is built correctly, then it is unobtrusive and does not distract the users from their goals. If it does, you either need to soften it or even remove it at all. That means that the animation shouldn’t slow down the user or prevent it from performing the task.
But do not forget that animation is more of an art than science, so it’s better to experiment and test your decisions on users.
More resources
- Disney’s 12 Principles of Animation
- Making animation with Lottie
- The ultimate guide to proper use of animation in UX
- Material Design Motion
- A complete guide for Lottie animation, from designing to implementing on the web (with GatsbyJS)
Next
Animation for Web
