"inline"—the default display value for span and anchor elements in particular. The
workaround is to set Blast’s generated text elements to a display value of "inline-
block", which keeps "inline" elements behaving as they normally do while giving
them the added functionality of "block" elements (such as div and p), in which
position-related properties, including 3D transforms, can be styled. Taking this display
tweak into account, the inward text transition example would now look like this:
Click here to view code image
$(“div”)
.html(message)
.blast({ delimiter: “word” })
.css({ opacity: 0, display: “inline-block” })
.velocity(“transition.perspectiveDownIn”, { stagger: 50 });
This sets the Blasted text parts’ display values to "inline-block" in the same
call to jQuery’s css() function that sets the elements’ opacity to a starting value of 0.
Textual flourishes
The final topic in this discussion of textual animation is the concept of flourishes, ambient
animations that produce ongoing effects for aesthetic purposes. One example might be a
string of text that flickers like a dying light bulb. Another might be having all the words in
a sentence continuously animate to different shades of blue.
Both of these are bad ideas.
These effects distract users and ultimately amuse only you—the developer who enjoys
toying with motion design. Never include animation just for the sake of animation; if a
part of your page is meaninglessly drawing the user’s attention away from the parts that
have utility, go back to the drawing board.
The rare exception to this is status indicators—text such as “Loading...”—that keep the
user abreast of what the interface is doing. These are appropriate targets for textual
flourishes because the flourishes tell the user that the interface is still processing data (as
opposed to having frozen). In this way, flourishes act as an engaging visual heartbeat.
So if textual flourishes are generally considered bad practice, why is this section even
included in the book? Because flourishes that aren’t animated are often a great idea!
Consider this a non-animation bonus provided by Blast: you can stylize the text elements
generated by Blast to produce colorful collages and other unique typographic designs. For
example, you could break apart a website’s slogan text (“Delivering happiness right to
your door!”) word by word to reduce the opacity of each successive word, thereby
creating a subtle gradient effect that spans the entire sentence. Here’s what that code
would look like:
Click here to view code image
Hi Mom
// Blast the div then iterate through the generated text elements
$(“div”).blast({ delimiter: “character” }).each(function(i, element) {
// Successively reduce the opacity of each element with an arbitrary
formula