animate text with gsap and blast.js

[redmile 7 Likes (Newbie)]

Hi all I'm a new member

 

I need to animate text with Gsap. I know of SplitText plugin, but unfortunately I am not a premium member. I found blast.js that it's perfect for my needs:  http://julian.com/research/blast/

 

Is it possible to use it with Gsap? If yes, can You provide me an example, please?

 

Thanks in advance

 

 

[Michael71 59 Likes (Contributor)]

Yes it sure is possible, actually SplitText what it does (among other cool things) is to split a text into letters, words, etc. As Blast.js does the same thing it applies a class to those "splitted letters, words, etc". Then it is as simple as animating any other element.

TweenMax.fromTo(".blast", 1, {autoAlpha:0}, {autoAlpha:1});

You can view an example with splitText here: 

See the Pen cmDpr by netgfx (@netgfx) on CodePen

Basically you can fork my example and use blast.js to split the letters/words and if you keep the same class it will basically work out of the box.

Note that in my example I use the .revert() function of SplitText that actually un-splits the "splitted letters/words" and makes it whole again.

[redmile 7 Likes (Newbie)]

Hey Michael, really thanks for the reply. I solved using this code:

$(window).load(function () {

	$("h2").blast({ delimiter: "letter" });

	var tl = new TimelineMax({delay:1, onComplete:completeHandler});

	tl.staggerFromTo(".blast", 0.15, {autoAlpha:0}, {autoAlpha:1},0.2);

	function completeHandler()
{
    $("h2").blast(false);
}

});