Option Sync

- NOTE: This documentation is for Velocity v2.

Option - Sync

The sync option allows animations that are on multiple elements to start at the same time. In most other animation libraries this is the default behaviour, however Velocity allows you to turn this off.

With the option turned on (the default), when you add an animation to a single element, then add the animation to an array of elements that overlaps the first element, Velocity will wait until all the previous animations have finished before starting the new animation. Other libraries need things such as the first element in the array to be the "shared" animation, while Velocity doesn't care.

With the option turned off it allows animations on multiple elements to simply start when the previous animation ends regardless of any other elements it might be running on (unlike using queue: false, this actually respects the queue). The begin callback will happen when the first element starts, and the complete callback when the last element ends. The progress callback will call in sync with the first element only, so there may be issues if using that for anything else (especially as there can be a gap between the first element and last element finishing).

In this example each element will fade out, however element2 will start fading out last as it has one running on it first.

var elements = [ element1, element2, element3 ];

element2.velocity({ height: "10em" });
elements.velocity({ opacity: 0 }, { sync: false });