best approach to tween text?

[azuki]

Hi all,

 

I've been watching a few tutorials around tweening with the new GSAP for javascript but I'm still wondering how I would go about tweening text.

 

I see that Carl has animated text in his video here: http://www.snorkl.tv...red-javascript/

 

so I'm wondering if those are just images or css text elements? Text animation in Flash through GS was a breeze which makes me think I'm not approaching the same goal (but in javascript) the right way. Essentially, I have a banner with graphic and text elements that I'd like to animate in a sequence.

 

Are there any tutorials out there for this now? Carl, I know you're probably working on one so if you have time for some insight, I'd appreciate it!

 

thanks!

[heyitsjayy]

He posted a zip file with code and files he used to obtain the effects in that banner ad in the thread entitled "Example: HTML Banner Using Greensock JS Beta".

 

For now, If you're interested you could always download the files and dissect the html, JS, and greensock code to figure out how the text tweening effects are done..

 

Understandably though, tutorials are easier to go through and learn from

[Carl]

Hi guys.

 

Glad you read that post. The htc banner is all Images.

 

The intro animation here uses text In divs or li tags.

http://www.snorkl.tv/2012/05/greensock-v12-beta-released-javascript-preview/

 

You should be be able to view source on that page and find the content of the iframe. On a train right now so I can't get the URL of the iframe for you.

 

And yes I plan on creating a ton of GSAP JS and AS learning materials.

 

C

 

[heyitsjayy]

Bringing this topic back up again.. keepin' it alive!

 

Thought I'd add that Carl's massive tutorial series on Greensock TimeLineLite for Flash was not in vain at all, since TimeLineLite is also now in JS, and used practically the same! (all thats really different is selectors used in Javascript).

 

Went through the last ones recently, on Methods and Properties, and some of the material in there directly relates to the tween animation effects like were used in the HTC example ad. Actually, the HTC ad, as well as the 'Bunnies' example, uses TimeLineLite. So check them out.

 

So basically the point is, if anyone's looking for tutorials to look through for some basics (for tweening text, etc. in a similar manner), you can first start with those to understand how it's also being used in the TimeLineLite JavaScript version for Greensock JS ads Carl made, and how he animated text / images / other elements in a similar way.

 

EDIT:

Oh, and also this will help you's all out, here's a sort of intro/tutorial on staggerTo for text, with SlowMoEase (on Flash, but also for JS version - and there's a brief intro vid on the JS). This is the basic approach that is used to tween the text in 'bunnies' example.

 

There were already some tuts out! (you just need to think a bit to apply it to JavaScript) Carl, thanks again!