Animating Characters, Words or Paragraphs with Blast.js


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.

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

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


Check this demo below:


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


Written by Deepanker

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

Leave a Reply

Your email address will not be published. Required fields are marked *


Twitter WordPress plugin

Integrate Twitter in WordPress with Official Twitter Plugin

Google Hangouts Hidden Animated Emojis