Chapter 5. Animating Text
Since textual animation is rarely employed in webpages, using it is an easy way to impress
users. That’s precisely what makes this topic so much fun to learn: the underlying
techniques are simple to program, but the results feel incredibly rich and complex to the
user.
This chapter introduces you to tools that remove the tedious aspects of textual
animation and equip you with an efficient workflow. Read on to learn the nuances of this
dark art.
The standard approach to text animation
The standard HTML elements we code sites with—divs, tables, anchor tags, and the
like—are the lowest-level components of a webpage that can be styled. So it makes sense
that these are the lowest-level components that can be animated.
Text does not constitute an element unto itself; a block of text is designated by the
browser as a text node, which is an unstylable, lower-level component that must be
contained by an element. Further complicating matters is the fact that the browser does not
subdivide text nodes into grammatical components; there is no way to access individual
letters, words, or sentences.
Consequently, to animate text on a letter, word, or sentence basis, you have to break
each text node into separate text nodes, and then wrap each of these in a new element. You
can then animate them. But manually wrapping text in span elements, for example, is
tedious work that results in bloated HTML.
It’s no surprise then that text animation on the web is uncommon; it’s typically too
much of a hassle to deal with. This puts the web at an aesthetic disadvantage to dedicated
motion design software, such as Adobe After Effects, which allows for the fine-grained
animation of text—the results of which are commonly seen in TV commercials and movie
title sequences. These effects can look absolutely beautiful. Unfortunately, in addition to
being difficult to integrate on the web, they’re also widely considered bad practice. After
all, the web is a medium that prioritizes function over form, and text animation is largely
about form.
However, there is one textual animation use case that can carry over well to the web
when used sparingly: if you pay close attention to the depictions of futuristic hardware
interfaces in movies, you’ll notice the common thread of text being animated into or out of
view on a grammatical level. The future of computing, according to pop culture, consists
of words and sentences animating with flickers, glitches, pops, and blurs. These effects
look cool, and there isn’t much downside to embracing them for the purposes of
transitioning content into or out of view since the text had to undergo a visibility
animation by one means or another. This concept of transitioning text visibility is
precisely what you’ll learn about in this chapter.