Entendiendo las funciones de easing

Las funciones de easing son funciones matemáticas que se usan para definir el efecto de movimiento de elementos. Un ejemplo de uso sería para suavizar dando un efecto de aceleración y/o frenado al desplegar un menú.

En general los nombre de las funciones se componen del nombre de la función matemática usada en el easing (lineal, cuadrática, bounce, ...) más las direcciones donde se aplica IN, OUT e INOUT, es decir, si es IN el efecto es al empezar el movimiento, si es OUT es al terminar y si es INOUT es al principio y al final. Así por ejemplo si tenemos el efecto "bounceInOut" habrá un efecto de rebote al comenzar el movimiento y otro efecto de rebote al terminarlo.

Se usan con asiduidad en jQuery y otros frameworks. Aplicando el principio de learn-by-example, se puede ver el comportamiento de las funciones más usadas en la siguiente dirección:

http://www.robertpenner.com/easing/easing_demo.html

La librería de easing más usada en jQuery es el jQuery Easing Plugin

http://gsgd.co.uk/sandbox/jquery/easing/