animation sequence that consists of one text element animating after another.
Staggering
This is where Velocity’s UI pack comes into play. (Review Chapter 4, “Animation
Workflow,” if you need a primer on the UI pack.) To impose a successive delay between
animation start times within an element set, use Velocity UI pack’s stagger option,
which expects a duration specified in milliseconds. Applying it to the previous code
example, you get:
Click here to view code image
$(“div”)
.html(“This is our new message.”)
.blast({ delimiter: “word” })
.css(“opacity”, 0)
.velocity(“transition.fadeIn”, { stagger: 50 });
The code above produces a successive delay of 50ms between the elements’ animation
start times. Importantly, note the Velocity call’s previous { opacity: 1 } argument
for "transition.fadeIn", which is a premade fade effect included with Velocity’s
UI pack. (Refer to Chapter 4, “Animation Workflow,” if you need a refresher.) Since the
stagger option works with UI pack effects, this example shows the effect that mirrors
animating opacity to a value only of 1.
As discussed in Chapter 3, “Motion Design Theory,” be careful to keep stagger times to
a low duration so that users aren’t waiting needlessly while text fades into view. Keep in
mind that the longer an element’s word count, the greater the overall time an animation
sequence will take to complete. Text element staggering is one of the easiest ways to slip
into the bad practice of slowing down your interface.
Transitioning text out of view
The code example in the previous section only animated text into—not out of—view; the
div’s preexisting text was immediately replaced by the new message. This doesn’t
necessarily make for poor motion design, but it is often beneficial from the perspective of
motion design theory to unify animations such that an element fades out of view in a way
that reflects the way it faded into view. Chapter 3, “Motion Design Theory,” covered the
concept of mirroring animations so that what comes in reflects what goes out. That advice
applies here.
If you want the outward textual animation to mirror the inward animation, you could
rework the code example as follows:
Click here to view code image
// Select the previously blasted text
$(“div .blast”).velocity(
// Animate the existing text out of view with the appropriate UI pack
effect
“transition.fadeOut”,
{
// Stagger the outward animation as you did the inward animation
stagger: 50,
backwards: true,