#### Velocity - Basic Animations

Statistics Invoices Schedule

##### Velocity animations

###### Velocity overview

Velocity is an animation engine that re-implements jQuery's `$.animate()` for significantly greater performance (making Velocity also faster than CSS animation libraries) while including several new features. In just 9Kb zipped, Velocity includes all of `$.animate()`'s features while packing in color animation, transforms, loops, easings, SVG support, and scrolling. Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.

###### Compatibility and browser support

Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, Velocity uses jQuery's `$.queue()`, and thus interoperates seamlessly with jQuery's `$.animate()`, `$.fade()` and `$.delay()`. Since Velocity's syntax is identical to `$.animate()`, your code doesn't need to change.
Browser support: Back to IE8 and Android 2.3. Below IE8, Velocity avoids loading, and aliases itself to jQuery's `$.animate()`. Also remember that 3D transforms are not supported below IE 10 and below Android 3.0, and that even 2D transforms aren't supported below IE 9. Also, remember that a perspective must be set on a parent element for 3D transforms to take effect.

###### 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
    });

##### Border animation

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).

General border animation

Border width

Border radius

Detailed border animation

Left border width

Top border width

Right border width

Bottom border width

##### Padding animation

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.

General padding animation

Box padding

2 paddings

Detailed padding animation

Left padding

Top padding

Right padding

Bottom padding

##### Margin animation

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.

General margin animation

Box margin

2 margins

Detailed margin animation

Left margin

Top margin

Right margin

Bottom margin

##### Edge animation

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.

General edge animation

Left and top

Right and bottom

Detailed edge animation

Left edge

Top edge

Right edge

Bottom edge

##### Text animation

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

Font size

Line height

Letter spacing

Word spacing

##### Color 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.

Color animation

Text color

Background color

Border color

Outline color

Color alpha animation

Text color alpha

Background color alpha

Border color alpha

Outline color alpha

##### Shadow animation

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.

Text shadow animation

Text shadow X

Text shadow Y

Text shadow blur

Box shadow animation

Box shadow X

Box shadow Y

Box shadow blur

Box shadow spread

##### Transform animation

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.

Translate animation

Translate X

Translate Y

Translate Z

Scale animation

Scale X

Scale Y

Rotate animation

Rotate X

Rotate Y

Rotate Z

Skew animation

Skew X

Skew Y