Velocity options

JavaScript and jQuery are falsely conflated. JavaScript animation, which Velocity uses, is fast; it's jQuery that's slow. Although Velocity works alongside jQuery, it uses its own animation stack that delivers its performance through two underlying principles: 1) synchronize the DOM → tween stack to minimize layout thrashing, and 2) cache values to minimize DOM querying. Below is a set of basic Velocity options:

// Animation basics
$element.velocity({ 
	width: "500px",
	property2: value2
}, {
	// Velocity's default options
	duration: 400,
	easing: "swing",
	queue: "",
	begin: undefined,
	progress: undefined,
	complete: undefined,
	display: undefined,
	visibility: undefined,
	loop: false,
	delay: false,
	mobileHA: true
});

Velocity allows you to animate border CSS properties such as border width, border color and border radius: the border-width CSS property sets the width of the border of a box; the border-color CSS property is a shorthand for setting the color of the four sides of an element's border; the border-radius CSS property allows Web authors to define how rounded border corners are. All these properties can be animated together or separately for all 4 sides (corners).

The padding CSS property sets the required padding space on all sides of an element. The padding area is the space between the content of the element and its border. The padding property is a shorthand to avoid setting each side separately. Velocity animates one numeric value per property. Hence, you can pass in: { padding: 1 } or { paddingLeft: 1, paddingRight: 1 }. But you cannot pass in { padding: "1 1 1 1" } because you're providing multiple numeric values.

The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left. Negative values are also allowed. Velocity animates one numeric value per property. Hence, you can pass in: { margin: 1 } or { marginLeft: 1, marginRight: 1 }. But you cannot pass in { margin: "1 1 1 1" } because you're providing multiple numeric values.

Velocity allows you to animate side edges: left, right, top and bottom. You can specify only 1 or 2 properties (1 vertical and 1 horizontal). When both the right CSS property and the left CSS property are defined, the position of the element is overspecified, the left value has precedence. When both top and bottom are specified, and height is unspecified or either auto or 100%, both the top and bottom distances are respected.

Font size, line height, letter spacing and word spacing are also animatable: the font-size property specifies the size of the font – specifically the desired height of glyphs from the font; on block level elements, the line-height property specifies the minimal height of line boxes within the element; the letter-spacing property specifies spacing behavior between text characters; the word-spacing property specifies spacing behavior between tags and words.

General text animation

Velocity supports color animation for the following properties: color, backgroundColor, borderColor, and outlineColor. You can pass a color property a hex string (rgb, hsla strings, and color keywords are not supported), or you can animate the individual RGB component values of a color property: The color components are Red, Green, Blue, and Alpha, and they range from from 0 to 255. The fourth component, Alpha, ranges from 0 to 1.

Velocity supports shadow animation for the following properties: textShadow and boxShadow. The text-shadow property adds shadows to text, it accepts a comma-separated list of shadows to be applied to the text and text-decorations of the element. The box-shadow CSS property describes one or more shadow effects as a comma-separated list, it allows casting a drop shadow from the frame of almost any element.

The CSS transform property allows you to perform translation, scaling, and rotation in 2D or 3D space. To achieve parity with CSS, Velocity uses the translateX and translateY property names for transform translations, not X and Y. Since Velocity only animates one numeric value per CSS property, an axis must be declared with a transform property. For example, scale cannot be animated to "1.5, 2", but scaleX() and scaleY() can be simultaneously animated to those values to achieve the same effect.