0

I am designing some UI animations for desktop program. I read some articles about animation (as I never did this before) and I have an idea on what and how. But one thing is I can not figure it out. How to calculate the right duration for an element that has size and position on screen? Is there any equation for this or formula or is all just a rule of thumb that if there are big movements across the screen they take more time and for small movements less time (and time is all up to 500ms). Is that it or is there any better approach? I came across this generator and I like it, but I just can not see how they are calculating. Does anyone know?

https://ibm.github.io/motion/

And another thing, how to set the right easing (i know, cubic-bezier). Is there any guide or thesis or even better any studies on what curve is the best for certain element/scenario? Or is this more like trial and error thing to play with handles of easing and just watch and feel? Or where can I see how Apple did it? Are there any studies about that?

In general, I am looking for any studies, thesis that goes into detail about easings, the duration for UI animation. I want to learn/read more about this so I can create good animations that feel right and natural and learn something. Can anyone help, please?

2
  • 3
    Perhaps better at ux.stackexchange.com – Scott Feb 11 at 10:54
  • This question is much too broad for the StackExchange format. There are tons of resources about animation easing out there. The speed depends on the nature of what you're animating and the feel that you want. For transitions between states, usually an out ease is used. – Zach Saucier Feb 11 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.