3

I've researched the web a lot for this and have come up with a very small list. Almost all iOS Apps and most current Web Apps use some form of easing or another. Interactions & Transitions are such an important part of UX today yet there isn't a great resource out there which can suggest the best easing for every situation. Yet I've seen 100s of Apps, Frameworks, Presentations & Videos that use perfect easing for every occasion.

Is there a guide somewhere which can illustrate which easing to use in which User eXperience use case?

So far I've only got the following:

  1. https://developers.google.com/web/fundamentals/look-and-feel/animations/choosing-the-right-easing

  2. http://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight

Please note, I already know what is easing, why we have to use easing, how can we use easing in CSS etc, and all the different types of easing. What I want to know is when to use which easing?

  • Not an expert on animations, but you should do some research on the topic of "animation principles" Here's a link to get you started. smashingmagazine.com/2012/10/30/… – nightning Jan 27 '15 at 19:42
  • Thanks for the link. It does have some really useful stuff including some easing principles. Still looking for something specializing in UI stuff and very very specific to easing. Even categorically stating which easing to use! – Gaurav Ramanan Jan 27 '15 at 19:46
  • 1
    Hmmm you might need to provide more specific cases you're looking for or it'll be too difficult to answer. E.g. Slide a modal into the screen. From top? bottom? left? right? The size of the item and the direction will affect presumable effect of inertia, gravity and stress on the element. Also need to factor in the "energetic-ness" of your app in general. This is an interesting topic though, I'm looking forward to learning more myself. – nightning Jan 27 '15 at 19:58
5

I guess there is no clear answer if there are standardised easings. The type of easing is depending on what additional information you want to provide on current interaction in the current context. So for example:

Interaction is removing an item off screen. When the item is of high importance, it has more "weight" and is "more sticky" to remove. When the item is of less importance (but of same type), its "weight" is reduced, hence its easing behaviour.

This is just a quick example from mind on how to use easing to add additional information, but it shows how faceted the expression of easing can be.

I saw the talk of Marcus Eckert at push conference and it was helpful to me, to reflect the importance of custom easings. "Getting from A to B - The Art of Interpolation" by Marcus Eckert at push.conference 2014 He describes in there the importance of easing, especially when to use which easing. So e.g. how to remove a big/heavy object on/off the screen, how "big/heavy" is defined in movement. Sry for just providing this link, but this talk will give you answers, due he starts with the basics of motion and its perception and ends with the appliance for various interactions.

Additionally I found a pretty good website which has a lots of transitions animated with the intended information on the interaction. Kind of a must-have-bookmark ;) ui-motion.com

  • 1
    While those are both good links for further information, could you please also answer the question on this site. Simple links to resources aren't an answer. – JohnGB Jan 29 '15 at 8:36
  • I restructured the post and provided some additional information. Thanks for the advice. – Stefan Wasserbauer Jan 30 '15 at 10:35
  • The post is much improved now. +1 – JohnGB Jan 30 '15 at 10:42

Your Answer

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

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