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

Containing  Animation   Logic

As  with    Velocity’s  delay   option, Velocity’s  incorporation   of  CSS display and

visibility  setting allows  for animation   logic   to  be  fully   contained   within

Velocity.   In  production  code,   whenever    an  element is  faded   into    or  out of  view,   it’s

almost  always  accompanied by  a   change  in  display or  visibility.

Leveraging  Velocity    shorthands  like    these   helps   you keep    your    code    clean   and

maintainable,   since   it’s    less    dependent   on  external    jQuery  functions   and free    of

repetitive  helper  functions   that    commonly    bloat   animation   logic.

Note    that    Velocity    includes    shorthands  for the opacity toggling    animations

demonstrated    above.  They    function    identically to  jQuery’s    fadeIn  and fadeOut

functions.  You simply  pass    the corresponding   command into    Velocity    as  the first

argument,   and you pass    in  an  options object, if  desired,    as  normal:

Click here to view code image
$element.velocity(“fadeIn”, { duration: 1000 });
$element.velocity(“fadeOut”, { duration: 1000 });

Using Velocity: Additional features

Additional Velocity.js features that are worthy of note include: the reverse command,
scrolling, colors, and transforms (translation, rotate, and scale).

Reverse Command

To animate an element back to the values prior to its last Velocity call, pass in
"reverse" as Velocity’s first argument. The reverse command behaves identically to
a standard Velocity call; it can take options and is queued up with other chained Velocity
calls.

Reverse defaults to the options (duration, easing, etc.) used in the element’s prior
Velocity call. However, you can override these options by passing in a new options object:

Click here to view code image
// Animate back to the original values using the prior Velocity call’s
options
$element.velocity(“reverse”);
or

Click here to view code image
// Do the same as above, but replace the prior call’s duration with a value
of 2000ms
$element.velocity(“reverse”, { duration: 2000 });

    Note

The previous    call’s  begin   and complete    options are ignored by  the

reverse command;    reverse never   re-calls    callback    functions.