Navigate back to the homepage
WriteReadMe
★ VN

The foundation of UI animations

My basic rules to do UI animation. Basic, but very useful.

Trong Nguyen
September 27th, 2020

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.

Animation with easing looks more natural compared to the linear one. Credit: Taras Skytskyi

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.

Animation by Taras Skytskyi
Animation by Taras Skytskyi

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.

Animation by Taras Skytskyi
Animation by Taras Skytskyi

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.

Animation by Taras Skytskyi
Animation by Taras Skytskyi

When to use linear

Objects that are not affected by any physical force move linearly (constant speed), we use linear easing. e.g: rotation

Animation by Taras Skytskyi

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

A navigation drawer opens over 250ms but closes over 200ms. Credit: Material.io
The card expands over 300ms but collapses over 250ms. Credit: Material.io

Timing depends on transition area

A switch animation has a duration of 100ms. Credit: Material.io
A FAB into a full-screen dialog: expanding: 300ms - collapsing: 250ms. Credit: Material.io

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

Next

Animation for Web

Hi, I'm Trong, product designer living in Singapore. I write to practice, and write to find ideas. Nice to meet you!
View all writing →

Sign up to my email list for updates

Be the first to receive my latest updates. No spam or share your email with any third parties.

More from Trong Nguyen

To be a good designer

One of the biggest lessons I learned this year is the power of confidence, for a designer.

September 5th, 2020 · 1 min read

Awesome Figma Tips Good Shit board

Celebrate small wins from my side project AwesomeFigmaTips.com

August 22nd, 2020 · 1 min read
© 2018–2021 Trong Nguyen: tantrongtt@gmail.com
Link to $https://twitter.com/trongawesomeLink to $https://medium.com/@trongawesomeLink to $https://www.instagram.com/trongawesome