Option Easing

- NOTE: This documentation is for Velocity v2.

Option: Easing

Overview

Velocity supports the following easing types by default:

• Pre-packaged into Velocity are jQuery UI's easings, except for the back, bounce, and elastic easing types. A bonus "spring" easing (sampled in the CSS Support pane) is also included.
• CSS3's named easings: "ease", "ease-in", "ease-out", and "ease-in-out".
• CSS3's bezier curves: Pass a four-item array of bezier points. (Refer to Cubic-Bezier.com for crafing custom bezier curves.)
• Spring physics: Pass a two-item array in the form of [ tension, friction ]. A higher tension (default: 500) increases total speed and bounciness. A lower friction (default: 20) increases ending vibration speed. Refer to Spring Physics Tester for testing values.
• Step easing: Pass a one-item array in the form of [ steps ]. The animation will jump toward its end values using the specified number of steps. See this article to learn more about step easing.

You can either pass in the name of a packaged easing (e.g. "ease-out" or "easeInSine"), or you can pass in one of the array types:

/* Use one of the jQuery UI easings. */
element.velocity({ width: 50 }, "easeInSine");
/* Use a custom bezier curve. */
element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);
/* Use spring physics. */
element.velocity({ width: 50 }, [ 250, 15 ]);
/* Use step easing. */
element.velocity({ width: 50 }, [ 8 ]);

Per-Property Easing

Easings can also optionally be declared on a per-property basis by passing in an two-item array as the property's value. The first item is the standard end value, and the second item is the easing type:

element.velocity({
    borderBottomWidth: [ "2px", "spring" ], // Uses "spring"
    width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics
    height: "100px" // Defaults to easeInSine, the call's default easing
}, {
    easing: "easeInSine" // Default easing
});

As with jQuery, "swing" is Velocity's default easing type.

See also: [registerEasings](Command - registerEasing.md)