Web Animation using JavaScript: Develop & Design (Develop and Design)

Delay

Specify the delay option in milliseconds to insert a pause before an animation begins.
The delay option’s purpose is to retain an animation’s timing logic entirely within Velocity
—as opposed to relying on jQuery’s $.delay() function to change when a Velocity
animation starts:

Click here to view code image
// Wait 100ms before animating opacity toward 0
$element.velocity({ opacity: 0 }, { delay: 100 });
You can set the delay option with the loop option to create a pause between loop
alternations:

Click here to view code image
// Loop four times, waiting 100ms between each loop
$element.velocity({ height: “+=50px” }, { loop: 4, delay: 100 });

Display and Visibility

Velocity’s display and visibility options correspond directly to their CSS
counterparts, and accept the same values, including: "none", "inline", "inline-
block", "block", "flex", and so on. In addition, Velocity allows for a value of
"auto", which instructs Velocity to set the display property to the element’s default
value. (For reference, anchors and spans default to "inline", whereas divs and most
other elements default to "block".) Velocity’s visibility option, like its CSS
counterpart, accepts the "hidden", "visible", and "collapse" values.

Within Velocity, when the display option is set to "none" (or when visibility is set
to "hidden"), the element’s CSS property is set accordingly once the animation has
completed. This effectively works to hide an element upon completion of an animation,
and is useful in conjunction with animating an element’s opacity down to 0 (where the
intention is to fade an element off the page):

Click here to view code image
// Fade an element to opacity:0 then remove it from the page’s flow
$element.velocity({ opacity: 0 }, { display: “none” });

    Note

The code    above   effectively replaces    the jQuery  equivalent:

$element

            .animate({  opacity:0   })

            .hide();