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

words into view one at a time, you would subsequently reverse Blast upon completion of
the animation. Consequently, JavaScript code that later interacts with the text won’t have
unexpected child elements that it has to parse out. In short, it’s good practice to avoid
leaving your HTML unnecessarily bloated so that further programmatic interaction with
your elements doesn’t become increasingly convoluted.

    Note

To  learn   more    about   Blast,  including   its unique  search  capabilities    and its

compatibility   with    screen-reading  software,   visit   its documentation   at

Julian.com/research/blast.

Now that    you’ve  separated   your    text    elements,   it’s    time    to  animate them.

Transitioning text into or out of view

The most common use of textual animation is animating text in and out of view. A basic
implementation of this is to animate the words in a sentence into view one after another.

Replacing existing text

Let’s start by creating a container div with placeholder text that will be replaced by new
text that animates into place:

Click here to view code image

Because the div starts out as visible, Blasting the div’s text results in child text
elements that are visible as well. Since your goal is to animate the generated text elements
into view starting from a state of invisibility, you have to make the generated text elements
invisible immediately after you call Blast:

Click here to view code image
$(“div”)
.html(“This is our new message.”)
.blast({ delimiter: “word” })
.css(“opacity”, 0);
.velocity({ opacity: 1 });
This replaces the div’s existing text with a new message. Then it Blasts the div using the
word delimiter. Since a call to Blast returns the generated text wrapper elements to the
jQuery selector chain, you can easily extend the code to set the opacity of each text
element to 0. This primes the elements for the subsequent Velocity call, which consists of
a simple opacity animation.

You may have noticed that the above code results in all text parts animating into view
simultaneously. This, of course, defeats the purpose of using Blast in the first place: if you
wanted all of the div’s content to animate into view simultaneously, you could have
simply animated the div itself. The goal here is actually to achieve a successive