Click here to view code image
$element.velocity({ height: “10em” }, { loop: true });
Infinite loops ignore the complete callback since they don’t naturally end. They can,
however, be manually stopped via Velocity’s stop command:
$element.velocity(“stop”);
Non-infinite loops are useful for animation sequences that would otherwise require the
repetition of chained animation code. For example, if you were to bounce an element up
and down twice (perhaps to alert the user of a new message awaiting them), the non-
optimized code would look like this:
Click here to view code image
$element
// Assume translateY starts at “0px”
.velocity({ translateY: “100px” })
.velocity({ translateY: “0px” })
.velocity({ translateY: “100px” })
.velocity({ translateY: “0px” });
The more compact and easier to maintain version of this code would look like this:
Click here to view code image
// Repeat (loop) this animation twice
$element.velocity({ translateY: “100px” }, { loop: 2 });
With this optimized version, if you have a change of heart about how much the top
value should be changed by (currently "100px"), you need only change the top value in
one part of the code. If there are many such instances of repetition in your code, it quickly
becomes obvious how much looping benefits your workflow.
Infinite looping is tremendously helpful for loading indicators, which typically animate
indefinitely until data has finished loading.
First, make the loading element appear to pulsate by infinitely looping its opacity from
visible to invisible:
Click here to view code image
// Assume opacity starts at 1 (fully visible)
$element.velocity({ opacity: 0 }, { loop: true });
Later, once the data has finished loading, you can stop the animation, then hide the
element:
Click here to view code image
$element
// First stop the infinite loop...
.velocity(“stop”)
// ... so you can give the element a new animation,
// in which you can animate it back to invisibility
.velocity({ opacity: 0 });