TweenLite – A Lightweight, FAST Tweening Engine

Hi,

This class is great, I have been using it extensively throughout my newest project. One thing I would like to do, which has given me problems, is something like:

TweenLite.to(fader, 2, {alpha: 0});
TweenLite.to(fader, 2, {alpha:1, delay: 2});

Just a fade out, and then back in. Is this the correct implementation, because it seems to do nothing.

Anyways, thanks again,
ian

ian, keep in mind that by default, TweenLite will overwrite tweens of the same object (to avoid conflicts) unless you specify overwrite:false. So your second tween was overwriting your first one. It should be more like:

TweenLite.to(fader, 2, {alpha:0});
TweenLite.to(fader, 2, {delay:2, alpha:1, overwrite:false});

Good luck ian!

This class is fantastic. Much better than Tweener and better documentation too.

bravo! this is load of functionality to squeeze into 2k!

I love the fact that it overwrites previous tweens on the same object by default. This means if you apply many tweens to the same object (for example a button color tween on rollover/rollout), you don’t start leaking memory due to piling up tween objects (which I think may happen using Tweener?)

The class works great!
How can the params of the ‘ease:Elastic.easeOut’ be changed so the ‘bouce is either less or more of a bounce?

e.g. TweenLite.to(myMovie2, 1, {y:300, delay:4, ease:Elastic.easeOut, overwrite:false});

As above to make the easeOut less of a bounce?

regards,

Dave

Dave, good news: the new release of TweenLite indeed supports passing extra parameters to your easing equation. You just need to use the special easeParams property, like:

TweenLite.to(my_mc, 2, {_x:200, ease:Elastic.easeOut, easeParams:[1.5, 2.45]});

I’m pretty new to flash, but I tried out TweenLite…and I love it already. It’s exactly what I’m looking for: powerful, lightweight, and miraculously easy to use.

Just wanted to say thanks.

it´s a incredible job! thank u! it´s much clearer than the Tween class of AS3…

Make

Jack, I was wondering if it is possible include additional properties like Blur, etc?

This looks soo cool by the way, thanks for developing such an amazing resourrce!

Mike, yes, absolutely you can tween filter effects like blurs, drop shadows, and a whole lot more with TweenLite’s “big brother” TweenFilterLite. It extends TweenLite, so the file size hit is incredibly small for the power it packs. You probably just didn’t notice the link to it on the TweenLite page. Check it out at http://www.tweenfilterlite.com. It’s available in AS2 and AS3 flavors.

Awesome, awesome, awesome.

I have been developing my own animation library for years and switching it over to AS3 is a pain for sure.

You’ve done a really great job so far, keep up the good work!

This is exactly what I was looking for. YOU ARE THE MAN!
Thank you for all your work.

Excellent job fixing Macradobe’s tween problem. I kept banging my head thinking that I was doing something wrong when using Adobe’s Tween class, due to the tweens hanging on me. Found out that it is a current bug. You can read this blog here to see others who are experiencing this issue: http://alvinzhang.info/?p=4

Oh and btw sent you some cash for your hard work. Really do appreciate it.

Hi Jack,

Just playing around with TweenLite and loving it so far. My mind if overflowing with ideas!

I tried to add both a “from” and a “to” tween to your second example with the text as shown below. I wanted to drop the words in the same way, but have them tween “to” a random color at the same time: You can drop this into your Sample_2.fla. Here is the code again:

//Drop the words into place
for (i = 1; i <= 7; i++) {
mc = this["word"+i+"_mc"];
// var color:int = (Math.random() * 0xFFFFFF) + 0xFF000000;
var color:int = 0xFF;
TweenLite.from(mc, 2, {y:mc.y – 140, autoAlpha:0, ease:Elastic.easeOut, delay:i * 0.35});
TweenLite.to(mc, 2, {tint:color, overwrite:false, delay:i * 0.35});
}

Ken, You can do a TweenLite.to() and a TweenLite.from() on the same object BUT here’s the reason your tweens looked like they didn’t work (they actually did – just not the way you expected):

When you tween the tint (what used to be mcColor), it must factor in the alpha value because the ColorTransform affects it. For example, if you set a MovieClip’s alpha to 0.5 and then use a ColorTransform to make it 0xFF0000, the alpha will end up being 1 unless you factor in the alphaMultiplier. TweenLite tries to accommodate this by looking to see if the same TweenLite instance is also tweening alpha. If it is, it uses that alpha value in the alphaMultiplier, otherwise it uses the MovieClip’s current alpha. In your case, when the TweenLite.to() started to run, the alpha was zero, and since there was no alpha being tweened in that same instance, it used that “current” value so your MovieClips had an alpha of zero the whole time. It would be possible to add code to TweenLite to look through all the other tweens of an object to see if there are any other instances affecting the alpha, but I’ve resisted doing so because it would increase the Kb and slow things down slightly, not to mention there’s an easy workaround:

To get around it, all you need to do is make sure you tween the alpha in the same TweenLite as the tint, like so:

TweenLite.from(mc, 2, {y:mc.y – 140, autoAlpha:0, ease:Elastic.easeOut, delay:i * 0.35});
TweenLite.to(mc, 2, {tint:color, autoAlpha:100, overwrite:false, delay:i * 0.35});

I’ve found the built in Tween class in AS3 to be inconsistent, I switched to your class, and have yet to have a problem. Excellent work I must say.

Jack, I totally agree with your reasoning here and have implemented my own ENTER_FRAME event listener and it works great.

The code i’m using:

onStart:function(){container.addEventListener(Event.ENTER_FRAME, render)}, onComplete:function(){container.removeEventListener(Event.ENTER_FRAME, render)}

would you recommend using onStartParams/onCompleteParams to do this instead of the way i’m currently doing it?

Thanks for the help and the speedy reply!

Brendan, that looks like a great solution! Thanks for sharing.

Hi Jack,

This thing is absolutely mind blowing!!

I’m trying to use TweenLite to make a masked movieClip that contains many thumbnails to scroll left/right (scrolling gallery).

Is there a way for me to set the codes to tween the movieClip 50 pixels to the left or right instead of moving it to a specific X value on the stage??

In other words, I want to make it so that each time a user click on either the PREV or NEXT button, the movieClip will tween 50 pixels to the left or to the right.

Thanks a million for sharing it!!

Steve, all you need to do is put quotes around your values to make them relative. So to move your MovieClip 50 pixels to the left, you’d do:
TweenLite.to(my_mc, 2, {x:”-50″});

Hi,
I’m also trying this very good class.
How can I do a relative movement using a variable as value?

TweenLite.to(my_mc, 2, {x:”+offset″});
doesn’t work.

Ignazio, you can use a variable for relative offsets by coercing it into a String, like:
TweenLite.to(my_mc, 2, {x:String(offset)});

Hi jack, a little question.

Is there any way to set up a sequence of Tweens, and set it up so when the sequence of tweens is finished, it calls another function?

Lets say I have a Sprite full of movieclips which all individually motion-tween into place. when i move to a next section of the website, i have tweens set up that make all of the movieclips fly back out of the screen.

however, i want it so only once every Tween has finished, then the function will be called to load in the next section of the website.

the only thing i can think of is having all my Tweens onComplete each call some function, which counts a number, and when the number hits a certain amount, it calls my load function.

however, is there a more elegant way of doing this, or is that just about it?

“Wondering”, sure, you certainly can set up a sequence of tweens and then call a function when they’re all done. The answer is simpler than you may think. Just use delays and then use the onComplete of the LAST tween in the sequence to trigger the function. Like so:

TweenLite.to(mc1, 2, {x:100});
TweenLite.to(mc1, 1, {y:100, delay:2, overwrite:false});
TweenLite.to(mc1, 3, {x:300, delay:3, overwrite:false, onComplete:onFinish});

function onFinish():void {
trace(”The sequence has finished!”);
}

Or you could use the TweenLite.delayedCall() to call a function after a set amount of time (when you know the tweens will be finished).

Or even better, check out TweenMax’s sequence() and multiSequence() methods! http://www.TweenMax.com

Just wondering about bezier tweens. I cant seem to find any information about how to do it or even if they are supported. but everything else seems great and i use tween lite for pretty much everything i do now.

thanks

Aaron, TweenLite doesn’t support bezier tweens at this point. One of the primary goals of the class is to keep it extremely lightweight, so I have to protect the file size diligently. But I just released TweenMax which does include that feature (and many more). check it out at http://www.TweenMax.com.

I’m new to tweenlite and have yet to play with it (I will when I get some time), but was wondering if with tweenlite you still need to worry about garbage collection like you do with built-in AS3 tween class or if you put something in to handle this.
Thanks

Sean, there’s no need to worry about garbage collection. It’s all built into the class. Just tween away to your heart’s content. Check out the speed test I whipped together and crank up the number of tweens – you should see that it scales very well and doesn’t bog down after a while (which you’d expect if there were garbage collection issues).

Dude,

Thanks so much for this code. I use it on all my projects. I was one that used the Fuse Kit all the time but started doing all my projects in AS3 and this saves the day and works way better.

thanks

got it!, thank you so much jack! TweenLite is amazing and makes things so much easier. esp with. TweenLite.from and the “” relative values. saves me so much more time and brain power when writing code. Its light-weightness is just what i need!

Your the best!

Jack,

Thanks for the great work; it’s been a life- and project-saver.

Just wanted to say that you have made my life so much easier – thanks so much for working so hard on it. Now if you can just apply this simplistic logic to textfield creation and formatting… or maybe a component library…

Jack,

I came across your class while searching around for fixes for the standard Tween class’s! It was a big relief to implement your class! Everything was going so much faster! I really like it and I certainly will use it in other projects too!

I’ve used it for a school-project. This is my first Flash-based website actually. Most of the site is self-study. I’m not a Flash pro (yet) I like the project, but I want to move on to bigger/better things!

Annyways, you can take a look when clicking my name, it’s not perfect, but I’m quite happy with it, knowing it was only three months ago that I used Flash for the first time!

Thanks for you great work! I’ve given it further to some friends from school, they were really exited!

Jeroen.

Bless your heart Jack.

I think this might offer everything I need. I especially like being able to add a delay before starting tweens, and it’s also great to see that this offers built in garbage collection so I don’t have to push my tweens to an array and then clear out the array every time.

Jack, this is absolutely fantastic, just did some tests of my own, TweenLite as3 is even getting along really well with Papervision3D.

Would you ever consider implementing bezier functionality? Or adding an extended class that supports it? It’s the only reason we would have to need tweener over TweenLite now.

Yep, Matthew, wish granted. Bezier tweening is now available in TweenMax
http://www.TweenMax.com

I’m glad I found this tweening engine on google, I am new to actionscript and this makes things easy for me, thanks for all your hard work. I wanted to ask about tweening many items in a row. I have 6 movieclips that I tween one right after the other. After the tween completes, am I supposed to remove the tween from memory somehow to make upcoming events run smooth? Like my_mc = null; or something?

Nope, David, you don’t need to worry about memory management or “garbage collection” tasks with TweenLite. It handles it all for you. Once a tween has finished (actually, within about 2 seconds), it’ll delete itself. Tween with reckless abandon. Go crazy.

Jack, this is absolutely brilliant. I even feel like going over old project to shift from my earlier engine. Wish I could convince clients to pay me for it.
I was wondering however, how hard it would be to extends this to allow pause and resume of Tweens. Haven’t started looking through your code yet as I’m really busy and more than a little scared to try. But maybe there was a reason you haven’t built this in.
Cheers, and thank you very much.

Well, Ashim, I’ve got good news and bad news for you…

First the bad news: Since one of my top priorities is keeping file size down and speed up, I don’t plan to add pause/resume functionality to TweenLite. A lot of agencies and developers have standardized on TweenLite because it is very lightweight and nimble, so I feel an obligation to diligently guard the file size. Many other tweening engines have suffered from “feature bloat” over time and I’m trying to avoid that.

Now for the good news: TweenMax is exactly what you need. It’s available now at http://www.TweenMax.com

Same syntax, same core. Just a bunch of extra features like bezier tweening, pause/resume, isTweening(myObject), sequencing, and getTweensOf(myObject).

Great Job! I like TweenLite full hearted and it helps me a lot in craeting a AS3 game! It tooks me 10 mins to read and understand before I make my object moves!!

Thanks for this great engine!! Keep the good work!

is it possible to only put 50% on the tint so that the whole object doesnt change colour?
thanks

Daniel, TweenLite doesn’t tint to percents, but there are a few options you have:

1) Use TweenFilterLite to colorize it (using the ColorMatrixFilter). See the interactive sample at http://www.tweenfilterlite.com for more info. This can be a really cool effect, and it does allow for various percents (amount).

2) Sign up for Club GreenSock and to get the bonus ColorTransformProxy utility class I created for use in conjunction with TweenLite for tweening all the various ColorTransform-related properties, including redOffset, greenOffset, blueOffset, redMultiplier, greenMultiplier, blueMultiplier, tint, and even tintPercent and brightness!. Sign up at http://blog.greensock.com/club/

Do you know what the loveliest thing is for me? (Beside its great features, free one)?
It is that you keep developing both AS2 & AS3 versions for both TweenLite , TweenFilterLite. This makes me depend on the same amazing twining class in both cases whether I want to develop a AS2 or AS3 project…

Thank you , you are live saver.

This is extremely useful. I really appreciate for making this available to public.

when applying this code, nothing happens…
this.soundChannel=this.sound.play();
TweenLite.from(this.soundChannel,2.5,{volume:0});

felixz, I’m not exactly sure what your “this.sound” refers to, but I tried this and it worked perfectly:

var snd = new Sound();
snd.load(new URLRequest(”myMusic.mp3″));
this.soundChannel = this.snd.play();
TweenLite.from(this.soundChannel, 5, {volume:0});

Keep in mind, though, that this was a local test and I didn’t add any code that would wait to start the tween until the sound loaded (if you try this over a web connection, there will be some lag time in the MP3 load, and if you start the tween right away it might finish before the sound even loaded)

TWEENLITE is the best thing that happened to me this year!

I JUST LOVE it…. I can’t get enough of it. I am making effects that would’ve been rendered impossible using other tween engines!

Heya!

Just wanted to pop by and thank you for making my life easier. Tweenlite has been with me for a bit over 4 months now, and I’ve loved every second of time spent with its smooth algorithmic self. It makes me wobbly, but in a good way.

So keep up the good work, it is well appreciated!

Cheers
MadTea

Hey!

I had a quick question about killing tweens.

My problem is, I have TweenLite tweens in my ROLL_OVER, ROLL_OUT, and CLICK events. When I click on my object, it plays the tween inside of my CLICK handler, which has overwrite set to false. When I roll out of my object, the CLICK tween gets overwritten anyway.

I don’t have overwrite: false set on the ROLL_OVER, and ROLL_OUT tweens because I want them to overwrite each other when I roll over or roll out of the object, but I don’t want them overwriting my CLICK tween ever.

What can I do?

Thanks,
Andy

Yeah, Andrew, that’s a unique challenge. Not impossible to overcome, though. You can selectively remove tweens with the complete() or removeTween() methods. You’d just need to keep track of your TweenLite instances to know which ones to delete. For example, maybe you store the ROLL_OVER and ROLL_OUT tweens in a variable and then kill it when necessary, kinda like:

var rollTween:TweenLite;
function onRollOver($e:MouseEvent):void {
TweenLite.removeTween(rollTween);
rollTween = TweenLite.to(my_mc, 1, {scaleX:1.2, overwrite:false});
}
function onRollOut($e:MouseEvent):void {
TweenLite.removeTween(rollTween);
rollTween = TweenLite.to(my_mc, 1, {scaleX:1, overwrite:false});
}
function onClick($e:MouseEvent):void {
TweenLite.to(my_mc, 1, {scaleX:2});
}

wow. i was just starting to look at the liveDocs on the tween class with a heavy heart when i found this and my day got brighter. If i use this as much as i think i will i’ll be donating for sure. you just saved me a half days head scratching at least. thanks muchly.

Thanks for the awesome tweening engine
I have been using the built-in tween class for ages, but recently (today ) changed to TweenLite.

Not only has it been extremely simple to use, but it’s also much faster (which initially surprised me, as I expected the less dynamic built-in class to be faster) and it’s great not having to work with garbage collection e.t.c.

Thanks again,
Bentley

Man this tween class saved me!!! Actionscript 3 Tween class should be as successful as TweenLite.. really disappointed in adobe…

Hi,

I like the tint feature, but what if I want my movieclip to only tint to a color just a little bit? Like I’m trying to let someone know their mouse is over it. My image turns bloodshot red, I’d like it to be just a tiny bit redder.

Anony, you’ve got several options:

1) Use TweenFilterLite’s (or TweenMax’s) colorMatrixFilter to colorize your clip slightly, like:
TweenFilterLite.to(my_mc, 1, {colorMatrixFilter:{colorize:0xFF0000, amount:0.2}});

2) Use the ColorTransformProxy class I created as a membership benefit for all Club GreenSock members. It has a tintPercent property, so you can control how much of a tint your MovieClip gets. See http://blog.greensock.com/colortransformproxy/ for an interactive demo. Join Club GreenSock at http://blog.greensock.com/club/

This documentation is the best and useful docementation thanks jack.

Hi,

Just wanted to say that I got really used to using the ActionScript 3.0 built-in Tween class and was sceptical at first when I got told it’s better to make the switch to a custom built.

But I had to look it up and when I found this class all I really needed to look at was the syntax and functionality and I was hooked! And the speed increase is just a neat bonus.

Expect some donations in a near future.

This amazing. Thank you for your hard work and for sharing such an immensely useful tool!

Amazing work. Seriously this has saved me so much time and effort, and I’m sure the same is for hundreds of other developers.

As soon as I get payed for this project I’m working on, I’ll be sure to donate.

Wow. Brilliant.

Was getting increasingly unhappy with the bloat of Adobe’s built-in Tweening class. Thanks so much. I get paid at the end of the month, will definately drop a donation in your paypal.

I’m completely sold!!!
I’ve just tried replacing Adobe’s Tween for your TweenLite on some camera movements, and all of the sudden everything rendered ridiculously fast!!!
and I have been blaming away3D for ALL the slugishness… (still, having performance issues with the renderer) but man! it made a huge difference, I don’t care if it’s a few bites heavier and not strict typing, I just saved about 100 lines of code and that was just one of the camera’s Classes.

Oh, by the way… non-coding designers in my office appreciated the speed more than anyone else. Now they hate me for not showing them this sooner.

thanks for all. I’m blown away

Class is really good. a lot better than Tweener and the documentation is really awesome

Wow
Wow
WOOOOOOOOOOOOOOOW!!!

the more I use it, the more I’m addicted to it!

and this time, addiction is not a bad thing!

Thank you so much for this awesome code. It saves me a ton of time and is soooo efficient and flexible. Great work!

Just saved me so much time trying to do the simplest thing from scratch. You are amazing! Thank you for taking the time to do this and share it with the rest of us, awesome work!

Great utility — I’m replacing Tweener with this in my code.

I guarantee I’ll be purchasing a license for this for my current and future products — good work!

Greetings all members,

I would just like to say hello and let you know that I’m happy to be a member – been a lurker long enough

Hope to contribute some and gain some knowledge along the way….

Congratulation Jack !! it was my real pleasure when I saw “Todd Perkins” the Flash specialist and Adobe Certified Instructor recommends your TweenLite as the “powerful and favorite tween engine” in his “Flash CS4 Professional OOP” video tutorial at Lynda.com:
http://www.lynda.com/home/DisplayCourse.aspx?lpk2=759
Yes , I vote with him too , your engine is the best , Thank you for sharing this great engine with us , YOU ROCK !!

Todd Perkins recommended your website and ever since I found it, I fell in love with your engine. Each day I discover something new, something which eases my life as a web-developer! Thank you very much for it.

I was having some issues with IE7 maxing out the CPU at 100% using the default Adobe Tweens – just swapped them out for TweenLite and literally doubled the performance! Now it spikes up to around 70% and drops to 5% between tweens – and that’s easily the worst performing browser. Excellent tween engine, I noticed an instant performance increase across all browsers. Good work!

The TweenLite class and all related classes are keep on getting better and better. Congratulations! Just hoping to see a amount value for the tint plugin in v11 just like in the old TweenFilterLite class.

To correct myself, the tint ammount can be achieved with the colorTransform plugin. Thank you Jack for the e-mail, I really appriciate it!

Having only just discovered this engine I am very impressed!

So easy to use and very effective. A minute after download I had my movieclips dancing across the stage, all of my colleagues are in the process of installing it

I’ll harass my boss and see if we can allocate you some of the budget as a small donation!

Excellent work Jack.

This is an incredibly easy to use Tweening platform!

I have used it for several Papervision3D projects and it has been more or less flawless so far.

Good work Jack!

R

I just wanted to say thank you for such an amazing class! It has really given me all teh elements I need in an easy to understand and use way to achieve what my imagination sees.

Greensocks rocks, and I am well grateful. Will donate when I can (credit crunch stuff).

Love your work man! Definitely my fav tweening platform!

Congrats on the new v11. Very exciting for the entire Tween Engine users community.

Thank’s a million Jack you did a great job!

Jack-

You’re amazing. I love you for what you’ve done. You will be getting a donation shortly Stuff like this deserves money.