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

Quick   Review  of  Visibility  and Display

For reference,  the CSS display property    dictates    how an  element affects the

positioning of  the elements    surrounding it  and contained   within  it. In  contrast,   the

CSS visibility  property    exclusively affects whether an  element can be  seen.   If

an  element is  set to  "visibility:    hidden",    it  will    continue    to  take    up  space

on  the page,   but its space   will    simply  be  represented by  an  empty   gap—no  part    of

the element will    be  seen.   If  an  element is  instead set to  "display:   none",  the

element will    be  fully   removed from    the page’s  flow,   and all elements    within  and

around  it  will    fill    into    the removed element’s   space   as  if  the element never   existed.

Note that, instead of removing an element from the page’s flow, you can simply mark
the element as both invisible and non-interactive by setting its visibility to
"hidden". This is useful for when you want a hidden element to continue taking up
space on the page:

Click here to view code image
// Fade an element to opacity:0 then make it non-interactive
$element.velocity({ opacity: 0 }, { visibility: “hidden” });
Now, let’s consider animations in the opposite direction (showing elements instead of
hiding elements): When display or visibility is set to a value other than "none"
or "hidden", the value is set before the animation begins so the element is visible
throughout the duration of the ensuing animation. In other words, you’re undoing the
hiding that occurred when the element was previously removed from view.

Below,  display is  set to  "block" before  the element begins  fading  in:

Click here to view code image
$element.velocity({ opacity: 1 }, { display: “block” });
This effectively replaces the jQuery equivalent:
$element
.show()
.animate({ opacity: 0 });

    Tip

For a   complete    overview    of  Velocity’s  animation   options,    consult the

documentation   at  VelocityJS.org.