Blast JS just explodes a string and wraps up the words or characters with span or div so you can animate them individually with different timing to produce awesome text animations.
I used the following method on one of my client’s projects: I used blast js to explode strings inside ‘.blasttext’ class everywhere on the dom and wrap it up with <span>. I used jQuery to add inline attribute transition with the delay of 0.05s in an increased stepped way to produced a staggered animation effect.
Demo – https://projects.webdevpuneet.com/wp/redstring/
Blast – http://velocityjs.org/blast/
Velocity – http://velocityjs.org/
jQuery Code:
$(document).ready(function() {
$(".blasttext").blast({
delimiter: "character", // Set the delimiter type (see left)
search: false, // Perform a search instead of delimiting
tag: "span", // Set the wrapping element type (e.g. "div")
customClass: "", // Add a custom class to wrappers
generateIndexID: false, // Add #customClass-i to wrappers
generateValueClass: false, // Add .blast-word-val to wrappers
stripHTMLTags: false, // Strip HTML before blasting
returnGenerated: true, // Return generated elements to stack
aria: true // Avoid speechflow disruption for screenreaders
});
$( ".blasttext" ).each(function(){
$this = $(this);
tags = $this.find('span');
total = tags.length;
for ( i = 0; i < total; i++ ) {
tags[i].style.transition = 'all ' + .05 * (i+1) + 's ease ' + .05 * (i+1) + 's';
}
});
});