eyeballing your code.
Another advantage of Velocity over CSS is that it supports four value operators that can
be optionally prefixed to a property value: +, -, *, and /. These directly correspond to
their math operators in JavaScript. You can combine these value operators with an equals
sign (=) to perform relative math operations. Refer to the inline code comments for
examples:
Click here to view code image
$element.velocity({
top: “50px”, // No operator. Animate toward 50 as expected.
left: “-50”, // Negative operator. Animate toward -50 as expected.
width: “+=5rem”, // Convert the current width value into its rem
equivalent and add 5 more units.
height: “-10rem”, // Convert the current height value into its rem
equivalent and subtract 10 units.
paddingLeft: “*=2” // Double the current paddingLeft value.
paddingRight: “/=2” // Divide the current paddingLeft value into two.
});
Velocity’s shorthand features, such as value operators, retain animation logic entirely
within the animation engine. This not only keeps the code more concise by eliminating
manual value calculation, but also improves performance by telling Velocity more about
how you plan to animate your elements. The more logic that is performed within Velocity,
the better Velocity can optimize your code for higher frame rates.
Chaining
When multiple Velocity calls are chained back-to-back on an element (or a series of
elements), they automatically queue onto one another. This means that each animation
begins once the preceding animation has completed:
Click here to view code image
$element
// Animate the width and height properties
.velocity({ width: “100px”, height: “100px” })
// When width and height are done animating, animate the top property
.velocity({ top: “50px” });
Using Velocity: Options
To round out this introduction to Velocity, let’s run through the most commonly used
options: duration, easing, begin and complete, loop, delay, and display.
Duration
You can specify the duration option, which dictates how long an animation call takes
to complete, in milliseconds (1/1000th of a second) or as one of three shorthand durations:
"slow" (equivalent to 600ms), "normal" (400ms), or "fast" (200ms). When
specifying a duration value in milliseconds, provide an integer value without any unit
type:
Click here to view code image