Properties map
Velocity auto-prefixes properties (e.g. transform becomes
webkit-transform on WebKit browsers); do not prefix properties
yourself. 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.
Velocity supports the px, em,
rem, %, deg, and
vw/vh units. If you do not provide a unit, an
appropriate one is automatically assigned — usually
px, but deg in the case of rotateZ
for example. Velocity supports four value operators:
+, -, *, and
/. You may suffix an equals sign onto any one of
them to perform relative math operations.
Card 1
Card 2
Card 2
Example code:
// Properties animation
Velocity(currentElements, {
marginLeft: 20,
marginRight: 20,
opacity: 0.5
});
Velocity(currentElements, "reverse", {
delay: 1000,
complete: function() {
currentElements.forEach(function(cards) {
cards.removeAttribute('style');
});
}
});
Chained animation
When multiple Velocity calls are stacked onto an element (or a
series of elements), they automatically queue onto one another
— with each one firing once its prior animation has completed.
Current example demonstrates animation of left margin; then,
when finished, animate the right margin property, then animate
opacity property. To animate an element back to the values
prior to its last Velocity call, pass in
reverse as Velocity's first argument.
Card 1
Card 2
Card 2
Example code:
// Chained animation
Velocity(currentElements, {
marginLeft: 20,
marginRight: 20,
opacity: 0.5
});
Velocity(currentElements, "reverse", {
delay: 1000
});
Velocity(currentElements, {
marginRight: 20
});
Velocity(currentElements, "reverse", {
delay: 1000
});
Velocity(currentElements, {
opacity: 0.5
});
Velocity(currentElements, "reverse", {
delay: 1000,
complete: function() {
currentElements.forEach(function(cards) {
cards.removeAttribute('style');
});
}
});
Effect options
Stagger effect
There are three options that work only with UI pack effects,
but not with traditional Velocity calls:
stagger, drag and
backwards. They are passed into a UI pack call
as standard Velocity call options. Specify the
stagger option in ms to
successively delay the animation of each element in a set by
the targeted amount. You can also pass in a value function
to define your own stagger falloffs.
Card 1
Card 2
Card 2
Example code:
// Stagger option
Velocity(currentElements, 'transition.slideUpIn', {
stagger: 500
});
Drag effect
Set the drag option to true to
successively increase the animation duration of each element
in a set. The last element will animate with a duration
equal to the sequence's original value, whereas the elements
before the last will have their duration values gradually
approach the original value. The end result is a
cross-element easing effect.
Card 1
Card 2
Card 2
Example code:
// Drag option
Velocity(currentElements, 'transition.slideUpBigIn', {
duration: 1000,
drag: true
});
Backwards effect
Set the backwards option to
true to animate starting with the last element
in a set. This option is ideal for use with an effect that
transitions elements out of view since the backwards option
mirrors the behavior of elements transitioning into view
(which, by default, animate in the forwards direction — from
the first element to the last).
Card 1
Card 2
Card 2
Example code:
// Backwards option
Velocity(currentElements, 'transition.slideDownOut', {
stagger: 400,
backwards: true
});
Velocity(currentElements, {
opacity: 1
}, {
duration: 500,
display: 'block'
});
Animation callbacks
Begin callback
Pass begin a function to be triggered
prior to the start of the
animation. As with complete, the begin callback
is executed once per call, even if multiple
elements are being animated. Further, if a call is looped,
the begin callback only fires once — at the beginning of the
first loop alternation.
The callback is passed the entire raw DOM (not jQuery)
element array as both its context and its first argument. To
access these elements individually, you must iterate over
the array using jQuery's $.each() or
JavaScript's native .forEach().
Card 1
Card 2
Card 2
Example code:
// Begin callback
Velocity(currentElements, {
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}, {
begin: function() {
alert('Begin callback example');
}
});
Velocity(currentElements, "reverse", {
delay: 1000,
complete: function() {
currentElements.forEach(function(cards) {
cards.removeAttribute('style');
});
}
});
Complete callback
Complete is the converse of the
begin option. Pass the complete option a
function to be triggered once the animation has finished.
The function is executed once per call, even if
multiple elements are being animated at once. Further, if a
call is looped, the complete callback only fires once — at
the end of the last loop alternation.
The callback is passed the entire raw DOM (not jQuery)
element array as both its context and its first argument. To
access these elements individually, you must iterate over
the array using jQuery's $.each() or
JavaScript's native .forEach().
Card 1
Card 2
Card 2
Example code:
// Complete callback
Velocity(currentElements, {
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}, {
complete: function() {
alert('Complete callback example');
}
});
Velocity(currentElements, "reverse", {
delay: 1000,
complete: function() {
currentElements.forEach(function(cards) {
cards.removeAttribute('style');
});
}
});
Progress callback
Pass the progress option a callback function to
be repeatedly triggered througout the duration of the
animation. The callback is passed the entire raw DOM (not
jQuery) element array as both its context and its first
argument. To access these elements individually, you must
iterate over the array using jQuery's
$.each() or JavaScript's native
.forEach(). Further, it's passed
percentComplete (decimal value),
timeRemaining (in ms), and
timeStart (Unix time).
Card 1
Card 2
Card 2
Example code:
// Elements to display progress
const percentage = document.querySelector('#percentComplete');
const time = document.querySelector('#timeRemaining');
// Progress callback
Velocity(currentElements, {
marginLeft: 20,
marginRight: 20,
opacity: 0.5
}, {
duration: 1000,
progress: function(elements, percentComplete, timeRemaining, timeStart) {
percentage.innerHTML = Math.round(percentComplete * 100) + '% complete.';
time.innerHTML = timeRemaining + 'ms remaining.';
}
});
Velocity(currentElements, "reverse", {
delay: 1000,
complete: function() {
currentElements.forEach(function(cards) {
cards.removeAttribute('style');
});
}
});
