Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
redmile

animate text with gsap and blast.js

Recommended Posts

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

 

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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);
}

});
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×