Text animation with TweenMax

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

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 1 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index2.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 2 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index3.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 3 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index4.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 4 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index5.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 5 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index6.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 6 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index7.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 7 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index8.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 8 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index9.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 9 [/button]

[button url=”http://bassta.bg/demos/tweenmax-text-animations/index10.html” style=”green” size=”small” type=”square” icon=”view” target=”_blank”] DEMO 10 [/button]

[button url=”http://bassta.bg/downloads/tweenmax-text-animations.zip” style=”blue” size=”small” type=”square” icon=”download” target=”_blank”] DOWNLOAD ALL DEMOS [/button]

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

Hello, I am div element.

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, "$&").replace(/\s/g, " "));

The result :

Hello, I am div element.

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!