1

How do I find the ideal easing function for specific scenarios like shape expanding and text appearing, etc.

1

1 Answer 1

1

Is there a best practice for what each Easing Functions should be used for?

Yes. You see, in real life, things are never at a standstill in one moment and going full speed in the very next moment. They need to accelerate first before going anywhere, and decelerate before they stop. For example, here's a coin sitting at a standstill, which gets brought up to speed and in the end is at a standstill again. In other words:

  • You ease out* of a standstill, going into motion.
  • You ease in* to a standstill coming from motion.

Example of a coin rolling - excerpt from the animators survival kit

* NB: The terms got swapped in the meantime. Details at the end.

Matching the animation with real life behavior is a fundamental part of making a convincing animation. In animation terms, the standstills described here are extremes, and the easing functions interpolate between the extremes.

A linear interpolation denotes no change in speed at all, so unless you're animating constant speed, a robot, something going round in circles continuously or otherwise "seamless" you shouldn't use it.

The specific values found in CSS are useful defaults, but you absolutely can and should play with the animation curves (ie assign specific cubic-bezier() values) if you want to give the things you're animating more character, make them snappier and so on.

You also probably want to use some sort of animation authoring tool instead of writing this by hand.


While easing out and in were defined as described above, which is an excerpt from Williams' work, they always were confusing. Apparently, Thomas and Johnston's Disney Animation: The Illusion of Life introduced the terms slow-in and slow-out in the order that is used in CSS, which then swapped the meaning for the easing terms, too.

So:

  • ease-in is the start of an animation, what the image above shows as an ease out
  • ease-out is the end of an animation, what the image above shows as an ease in

Further reading:

Your Answer

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

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