Advanced Forcefeeding

- NOTE: This documentation is for Velocity v2.

Advanced: Forcefeeding

Traditionally, animation engines query the DOM to determine the initial value for each property being animated. Velocity is the originator of an alternative technique entitled forcefeeding, in which users explicitly define start values themselves so that DOM querying can be avoided - eliminating layout thrashing altogether.

Forcefed start values are passed as a second or third item in an array that takes the place of a property's value. (As described in the Easing pane, the second item can optionally be a per-property easing).

element.velocity({
    /* Two-item array format. */
    top: [ 500, 0 ],
    /* Three-item array format with a per-property easing. */
    opacity: [ 0, "easeInSine", 1 ]
});

Above, we're passing top a start value of 0 since we know the element has yet to be translated (perhaps the page has just loaded). Next, we also know that the element's opacity is currently 1 because that's opacity's default value and we haven't modified the element yet. With both properties, we're forcefeeding in what we know (or want) the original animation values to be.

Like standard property values, forcefed start values also accept value functions. (You can take advantage of this feature to seed an element set differentiated start values. See Velocity's 3D demo codecast for an example of this.)

Be sure to forcefeed only at the start of an animation, not between chained animations (where Velocity already does value caching internally):

element
    /* Optionally forcefeed here. */
    .velocity({ top: [ 500, 0 ] })
    /* Do not forcefeed here; 500 is internally cached. */
    .velocity({ top: 750 });

Forcefeeding is invaluable in high-stress situations - in which heavy DOM querying can greatly impact framerate. However, in most low-stress UI animation, forcefeeding is an unnecessary optimization.