Animating Characters, Words or Paragraphs with Blast.js

Screen Shot 2015-03-08 at 11.39.57 PM

Animating an element with jQuery or CSS is an easy task. But what if you want to animate each and individual character of a line. What if you want to animate each word of the paragraph. For traditional animation, you need to put each element in a different span and then apply effect. For example if you want to animate all characters, you need to put all characters in different span. This will increase overhead. This is why Blast.js exists and it makes the work simple. With this new jQuery plugin, you can easily animate characters, words or paragraphs.

Blast.js is a powerful jQuery plugin and offers lot more features. It separates texts for typography manipulation. You can use any of 4 given separators: character, word, sentence, and element. It also supports regular expressions for custom phrase matching in delimiter criteria.

For example if you have a H1 heading like below and you want to animate each word.

    Hello World

Use this jQuery code. We want to animate word, so use delimiter: word.

$("h1").blast({ delimiter: "word" });

Above jQuery code will separate the heading like below and will apply effects.

<h1 class="blast-root">
    <span class="blast">Hello</span>
    <span class="blast">World</span>


Check this demo below:

See the Pen Blast.js – Option: Delimiter by Julian Shapiro (@julianshapiro) on CodePen.

Tags: | |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

Similar Articles


Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker