Animating Text with Blast.js

Originally published at: http://www.sitepoint.com/animating-text-with-blast-js/

Animating an HTML element with CSS or JavaScript nowadays, with the help of libraries, is more or less an easy task. But you can only animate a full existing element.

This means if you want to animate a single word in a paragraph, you have to wrap the word in an individual element (like a span) and then target it accordingly.

If you have only one or two span elements like this, it is not a big deal, but what if you want to animate each character in a paragraph? For every character, you will have to create a span, which adds a lot of extra markup and makes the text difficult to edit. That’s why Blast.js exists.

What is Blast.js?

Blast.js is a jQuery plugin that allows you to animate individual characters, words, or sentences. In this article, I will present some examples so you can see how to use Blast.js. To use Blast.js and try the examples below, you will need jQuery and of course the Blast.js file, which can be found on the project website for Blast.js.

As mentioned, Blast.js lets us create elements around characters, words, or sentences, but the library isn’t only limited to those options. In the next section, we will see some concrete examples to introduce some options. The list of options we will see is not exhaustive; the full list of available options can be found on the project’s website.

Blasting our First Chunk of Text

In this first example, we will blast a title to animate each character and move them, one by one, to the right. The only HTML code needed is the following:

<h1>Hello World!</h1>

After including jQuery and Blast.js, the next bit of code in this part will all be in your custom JavaScript file inside of jQuery’s ready handler, to ensure the page is ready:

$(function() {
  // Animation code
});

Now we can blast our title. In our example, just using $('h1') to target the element will be enough, but in your case you’ll use whatever selector is appropriate to target the element.

Continue reading this article on SitePoint
1 Like

I think the proper way to animate text is to use DOM to calculate the flow, convert DOM > SVG > Canvas. I think only IE8 wouldn’t support it.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.