In this quick tip I’will show you how you can easily animate text with TweenMax.

DEMO 1 DEMO 2 DEMO 3 DEMO 4 DEMO 5 DEMO 6 DEMO 7 DEMO 8 DEMO 9 DEMO 10 DOWNLOAD ALL DEMOS

Let’s say we have an element filled with text and we want to animate that text character by character.

<div id="demo-text">Hello, I am div element.</div>

The easiest way of animating each letter is wrapping it in span element and then animating the span. We can do this easily with little help from jQuery and some smart regular expressions:

var $demoText = $("#demo-text");
$demoText.html( $demoText.html().replace(/./g, "<span>$&amp;</span>").replace(/\s/g, " "));

The result :

<div id="demo-text"><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span><span>,</span><span> </span><span>I</span><span> </span><span>a</span><span>m</span><span> </span><span>d</span><span>i</span><span>v</span><span> </span><span>e</span><span>l</span><span>e</span><span>m</span><span>e</span><span>n</span><span>t</span><span>.</span></div>

Let’s animate those spans with TweenMax staggerFromTo method:

TweenMax.staggerFromTo( $demoText.find("span"), 0.2, {autoAlpha:0}, {autoAlpha:1}, 0.1 );

 

We’re done!  Now you can try all kind of crazy text effects with just two lines of code!