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