0

I am creating a desktop app, and I'm currently implementing animations.

I understand from Material Design Guidelines that I should set the speed for transitions for desktop apps at about 100-250 ms to keep it short. I also understand that the curve used depends on where the object animated is moving to and from.

But I could not find any resources on animating colors when hovering over or pressing an object (e.g. hovering over a button, hover over an item in a navigation drawer, hovering over a back button). In these examples, the color changes from the normal color to a shade or tint of the original.

What is the recommended duration for these kinds of animations (the buttons and objects are generally small)? Currently I am using 25-50ms for these color animations.

What is the recommended easing curve for these kinds of animations? Currently I am debating between EASE_OUT and EASE_BOTH.

Improve this question
2
  • I think it highly depends on where those color transitions and what those objects are. That would also determine the time and intensity of the transition. Do you have a specific example that we could look at so the answers here are all based on the same demo?
    – Jos van Weesel
    Sep 21, 2020 at 7:37
  • @Sir Exotic I realised it would be hard to give an example now so I will come back and ask again in a few months time, when I have a basic prototype working. Thanks!
    – cervonwong
    Sep 23, 2020 at 11:53

1 Answer 1

Reset to default
1

Once suggestion is use the inspect too to look at a few buttons on different websites to compare the timing and easing in them.

Normally for animation i'd follow the following

  • When ui elements are entering the screen, use Ease-out animations
  • For ui elements that are exiting, use Ease-in animations which are accelations

The case you mention can be a bit subjective. For color animation which are essentially state changes, you could consider using ease-in-out at around 300ms.

https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.