Click here to view code image
$element.velocity({ width: “100px” }, “easeInOutSine”);
CSS’s easings: "ease-in", "ease-out", "ease-in-out", and "ease" (a
subtler version of "ease-in-out").
Click here to view code image
$element.velocity({ width: “100px” }, “ease-in-out”);
CSS’s Bézier curves: The Bézier curve easing allows complete control over the
structure of an easing’s acceleration curve. A Bézier curve is defined by specifying
the height of four equidistant points on a chart, which Velocity accepts in the format
of a four-item array of decimal values. Visit cubic-bezier.com for an interactive
guide to creating Bézier curves.
Click here to view code image
$element.velocity({ width: “100px” }, [ 0.17, 0.67, 0.83, 0.67 ]);
Spring physics: This easing type mimics the bouncy behavior of a spring that’s been
stretched then suddenly released. As with the classical physics equation that defines
the motion of a spring, this easing type lets you pass in 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.
Click here to view code image
$element.velocity({ width: “100px” }, [ 250, 15 ]);
"spring" easing is a predefined implementation of the spring physics easing
that’s handy to use when you don’t want to experiment with tension and friction
values.
Click here to view code image
$element.velocity({ width: “100px” }, “spring”);
Remember that you can also pass in the easing option as an explicitly defined property
in an options object argument:
Click here to view code image
$element.velocity({ width: 50 }, { easing: “spring” });
Do not be overwhelmed by the number of easing options available to you. You’ll most
often rely on the CSS easing types and the “spring” easing, which suit the vast majority of
animation use cases. The most complex easing type, the Bézier curve, is most often
employed by developers who have a highly specific easing style in mind and aren’t afraid
to get their hands dirty.
NoteThe rest of the Velocity options in this section must be explicitly passed into
an options object. Unlike those already described, these additional options
cannot be supplied to Velocity in the shorthand comma-separated syntax.