Animation Easing

A visual reference of the options in the jQuery easing plugin and jQuery UI.

The world doesn’t move in a straight line — we have velocity and force acting on everything in motion. Easing is how we visually represent this.

jQuery comes with two easing functions: linear and swing. Both are boring, though swing, the default, adds a sense of natural movement. The jQuery UI library, however, that bastion of bells and whistles, includes the jQuery easing plugin with a full range of movement options.

With the new CSS3 transistions, these effects are also possible by defining the cubic-bezier value in the transition-timing-function property. See the W3C spec for details.