Speed Test – Tweening Engine Comparison Tool
Updated: 12/9/2009
On the heels of releasing a new version of TweenLite and TweenMax and investing a lot of time into optimizing performance, I figured I’d take a few minutes to throw together a tool that could demonstrate and quantify any speed differences among a few of the tweening engines out there. My goal was to post the tool and let the Flash community add to it if they so desired. It should be pretty simple actually. Download the source file here: AS2 or AS3. No trickery involved; the same code drives everything except for the tweens themselves. Basically it tweens white “stars” from the center outward at random angles, sizes, and with random delays. When a star’s tween ends, it just repositions itself at the center and starts again. You can play with the number of stars and the duration of the tweens to see how the tweening engines handle various types of loads.
Oh, and if you want to see the bezier tweening speed test, click here.
Select a tweening engine and click the “START” button.
And here’s a similar AS3 test. Keep in mind that AS3 runs in the MUCH faster AVM2, so I kicked up the instance numbers to keep it challenging.
You may be wondering what the “(FAST*)” means. I created a “fastTransform” plugin that takes advantage of strict data typing to speed things up slightly – it just demonstrates the concept of using a plugin to apply tweens in custom ways. And the TweenMax (FAST*) also uses a new feature that allows you to register certain easing classes (Strong, Quint, Quart, Cubic, Quad, and Linear) with the engine so that it uses special optimized code inside TweenMax that makes easing calculations about 40-80% faster.
The goal was not to figure out the most efficient way to tween a bunch of MovieClips in a starfield – it was to use a typical implementation for each engine that most people would use to do a single tween, and multiply that many times over to stress-test it. It’s meant to be a “real world” stress test. If the goal was simply to make the most efficient starfield, I could use a single tween instance that a looping function would check on every frame with a bunch of other code to do all the animation, but again, that doesn’t reflect “real world” typical usage. It would stress-test the code in your function, not the tweening engine. I provided the source code (AS2 or AS3) here so that everyone can see for themselves that I didn’t unfairly skew things in favor of any particular engine, but I’m certainly open to suggestions for optimization as long as it is in keeping with the goal of stress-testing the engines, not offloading the tweening calculations to another function.
Don’t be fooled
There have been a few speed tests on other sites that claim better speeds than TweenLite/Max and unfortunately they’re a bit misleading. In one, they have a stale version of TweenMax tweening Sprite objects which use 12.6 times more memory and require 2.2 times more processing power to update x and y properties compared to the Point objects that they tween using their engine! It’s no surprise that their test makes it look as though TweenMax is a memory hog and is half the speed of their engine. Another author has their engine push everything into a BitmapData object but they have TweenMax tweening raw overlapping objects, so the apparent speed difference is really the result of Flash not having to render the overlapping objects in the normal display list. When either engine was dropped into what I’d consider a more fair real-world test, TweenLite and TweenMax beat them both. I’d encourage everyone to do their own speed comparisons instead of assuming any authors’ tests are an accurate representation of real-world scenarios (including mine).
Comments (22)
Interesting comparison tool. I’ll cross-post what I’ve said on the Tweener mailing list, with some minor additions:
(…) It’s curious to see (from what my own benchmarks) that the impact on Tweener’s execution is more related to some very specific features – some options/features such as rounding values, some security checks as checking whether the object (still) exists or not during a tween, and specially, verifying whether a tweening already exists for a given object when a new tween is added – then the actual number of features. Verification of existing tweenings (that should then be overwritten) is what causes the biggest disparity in results I believe, so if you compare them with longer tweenings (ie, 10 seconds) then it’s a raw check of *updating* speed and the result (for all) is a lot closer.
But it shows that there’s some room for improvement for Tweener, I suppose.
While the current beta version has some fixes already (the one used on the test is the latest ’stable’ one, before a few minor changes for speed) hopefully the current version I’m working on will be faster by breaking it in more classes, while also making some of those additional security/redundant checking optional since sometimes it might not be what people want.
Hey Jack nice test, it appears TweenLite scales pretty well. I wonder the performance of the AS3 kits comparisons as AS2 is really a dog compared to AS3 AVM2 virtual machine.
Yep, the verification of existing tweens (and overwriting them) was a huge bottleneck in older versions of TweenLite too when doing tons of instantiations. The new version still has that feature fully intact (overwriting existing tweens of the same object) – I modified the lookup strategy so that it’s MUCH faster now, especially for MovieClips.
Zeh, Tweener has a huge following – you’ve done a great job building a full-featured tweening engine and it’s an honor to have you post here. I also admire your open and humble attitude about the various tweening engines available. If you’d like to drastically speed up Tweener’s verification routines, feel free to use my code (if it fits well in Tweener).
Ryan, I just posted an AS3 version of the speed test too. You’re right – the AVM2 is MUCH speedier but you can still see some difference in the tweening engines when you crank up the number of instances and lower the duration.
Thanks for the update Jack, yes when AS3 comes in the threshold is much much higher and even a bit more level in terms of the animation kits. AS2 is such a dog I am not sure why it is hanging around being so slow 
. Thanks for doing this it helps to speed things up when performance is highlighted and I think that we probably need a continual performance test of all anim kits much like bubblemark or comparisons of jquery, mootools, prototype etc.
Anything measured improves. Thanks for doing the AS3 version so quickly. It becomes another tool to show how much AS3 has surpassed AS2 in teh new AVM2 and how tight performance issues in AS2 become much higher thresholds in AS3. It still highlights a slow down in Tweener compared to TweenLite but there is some overhead in Tweener that is being worked on. I think this can only improve all animation kits when this is highlighted.
Jack, great work and the stars must have been in alignment – this is super bizarre but I just posted a benchmarking utility myself, tonight as well! (Have been working on it for a week or so.) I hope it’s okay to post a link to it here, I certainly don’t mean to detract from your great work here at all… if it’s nothing but a big party then here’s mine:
TweenBencher: http://go.mosessupposes.com/?p=5
Yes AS3 just rips, it is incredible. I am able to run over 30,000 animations on a very normal computer system, whereas in AS2 about 400 and the player was toast.
I also wanted to say that I admire your work with TweenLite. My big thing is that we need to be looking at things from a marketplace perspective, and working to fill gaps and real needs. A low-filesize tween engine is by far one of the top requests I got for Fuse (I tried for a while early on but threw in the towel on that), and you’ve done a marvelous job with it. Kudos.
While I have the floor I also want to be sure you all hear my recent call for an Open Standard for AS3 animation systems. I am leading a community initiative to create such a standard now called Go, more info at my blog. In short the idea behind Go is that less is more, modular and flexible are good, while dumping too many top-to-bottom animation solutions into the marketplace may be leading us down a less good path. In regards to how much management slows engines down as in Zeh’s post above, Go answers this by making all mangement 100% opt-in use.
I would like to promote making animation scripting accessible for all AS3 developers, and think it would be neat if all of these systems can work together without too much redundancy.
Also just to clarify, having lots of tween engines out there is certainly not a bad thing at all – It is a great and healthy thing indeed, as there are lots of needs and niches to address. What can potentially be less than good is when each solution is built differently from the ground up with nothing in common and no easy way to synchronize them.
Thanks again for your great work Jack!
I suppose I should post too since my engine is the last one up there eh?
First I want to say I admire all of the various engine developers for their work and openness. Different developers that make high-quality tweening engines is a great thing. The inspiration from each other’s work actually helps make them a bit more unified and really lets the developers make each one as best as possible. Each one, like everything, has it’s strengths and weaknesses, but with ideas taken from each engine, essentially makes each stronger.
I’m sure each one of us wants ours (and each others) to be the best they can be, so benchmarks like these, I’d say, pushes us to make each of ours better, as Ryan mentioned. This ultimately creates a better experience for the developers who use them, and especially the end user. And isn’t that what it’s all about?
Moses, wow, this is so weird having you, Zeh, and Andrew all post comments here. I’m very honored. Seriously, you’ve put a ton of work into Fuse and it’s quite obvious. On behalf of the Flash community, thanks. Same to you, Zeh and Andrew. I’m encouraged by the humble, open posture you all hold, and the desire to freely share your code which will in the end produce better solutions for everyone. As I’ve said before, feel free to use any of the strategies you find useful in TweenLite.
Man, many times during the routine work day I end up dealing with these old guys who are paranoid and won’t let me even look at their code even though we both work for the same client and I have absolutely no interest in nicking it for my own use whatsoever, even if I did have a need for it…
Open source and open minds forever. Too bad most of the world doesn’t feel the same way.
Hey Jack, Nice work, actually I like all your guys work, I was wondering if you could at all update the AS3 bencher with some of the other engines out there. Maybe some from Tween Bencher. Both comparison tools are nice, and would like to see how your tool works with them to. Thanks!
Thanks, Billy. Actually, I’d love to add more tweening engines to the AS3 comparison tool, but I’ve been slammed with work lately and just don’t have the time. I posted links to the source code, so you’re welcome to add them yourself. If you do, please send me your files so I can post them for everyone to benefit from. I hope to eventually whip together a bencher for filter tweens too, but again, I only have so much time in the day and I’ve gotta pay the bills
This is really useful thanks, also shows how much better AS3 performs
I had some trouble at first with TweenLite, but I have been using it for a while and I can say that I love it. The speed and size is just amazing and this is exactly what I am looking for in a Tweening engine. GOASAP looks good and I will surely give it a try, but if you don’t want to build your animation package TweenLite is the way to go.
Great job!
Wow, I had heard that TweenLite was faster than Tweener, but I would have never have guessed at twice the frame rate.
We I heard about the gTween release, I was wondering if it was faster than TweenMax.
Then I saw that you have updated the speedtest. Now I don’t worry : I know that I chose the best tweening engine. Your work is still the most impressive so far. With new features like retargeting, now we can even use TweenMax for mouse based interactive animations.
I’m going to donate even more this week, because you deserve it so much. After one year of using TweenLite and now TweenMax, I can’t imagine how to develop and animate another way. TweenLite family is so essential to me, that I wonder if Adobe would grab your work one day, as they did with Robert Penner’s easing equations.
Thanks again, Jack.
This is sick! Totally converted from Tweener, can’t believe the performance difference. And the Plugin Explorer is seriously amazing, makes the whole product instantly accessible! Keep up the good work mate.
I’m a long-time Tweener user but I’m now giving TweenLite/Max a go with my projects.
It seems promising, but I do have one question: do the speed tests use the same easing method across the different engines? If they don’t, this is obviously an inaccurate test because (for example) Tweener’s default easing is easeOutExpo, whereas TweenLite’s is easeOutRegular.
Absolutely, Matty. The test uses exactly the same easing equation for all of the engines. In fact, the same code drives everything except the tweens themselves. You can verify all this by downloading the source (links are in the post). No tricks.
Awesome — thanks for the info Jack!
I’m finding it pretty easy to make the switch as well. Kudos!
What an exciting post to wake up to. I don’t recall how I arrived at TweenLite, but I’ve been with it for the longest time running now. All of the tween engine’s I’ve used have been godsends. Documentation is very important, and I really appreciate what you’ve put together Jack. I’m still hoping to see this tween plugin added. TweenLazy.to(me, yesterday, { projectCompletion:1.1, ease:Super.easeInOut, onComplete:wakeMeUp });
= >
Hi Jack, this is a great comparison tool. I have found it really helpful in my work on a project related to AS3 performance. I was wondering if it would be convenient for you to add a “milliseconds to render frame” display? Regards!
You need to put some kind of “ShareThis” widget on your posts or something. This is a nice comparison.