Jump to content
GreenSock

redmile

animate text with gsap and blast.js

Go to solution Solved by redmile,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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.
×