Animation Speed Test: Zepto vs Greensock

[kaotix]

In the animation speed test, Zepto was reporting a FPS of ~45fps, when it was obvious from looking at the output on screen it was hitting about 5fps at best. Greensock was hovering around 35 and was incredibly smooth. Just wondering why Zepto would report such a high number if the actual output is so much lower?

 

Settings:

3000 sprites

Safari 6.0.2

OSX 10.7

[GreenSock]

Yeah, that can be pretty baffling, right? Doesn't make sense to me either, but here's my best guess...

 

Zepto uses plain CSS3 "transitions" for all of its tweening. The nice thing about that is the browser can offload those to a different thread altogether than the Javascript, and sometimes it even involves the GPU (for things like 3D transforms or opacity). Different browsers handle it differently, so it's a crapshoot as to how things are really handled. Some people have reported getting much worse performance with CSS3 transitions. Some see improved speed. The down side of transitions, of course, is that they're completely incompatible with IE (until v10) and they are much less flexible in terms of controlling sequences and easing and doing things like Bezier tweens, kinetic-based calculations, and a bunch of other stuff. They're fine for simple stuff, but virtually unusable for a robust animation system.

 

Anyway, the speed test utilizes Javascript to do all the timing calculations, so if the browser is handling JS in one thread and the transitions in a completely different CPU thread, it is entirely conceivable that while ticks are getting registered in JS, the transitions are lagging behind because that thread is bogged down. Therefore, the JS timer is reporting decent frame rates when in reality the browser is rendering those transitions much less frequently.

 

If that's the case, the fps counter would make Zepto look deceptively fast when in reality, it's much slower.

 

In all of my tests that I've run on my systems (including mobile devices), TweenLite has always reported as being faster than Zepto. But it varies by system I'm sure. Ultimately what we all care about is how well things actually LOOK on the screen (fluidity), so feel free to ignore the FPS counter.

 

Also note the "clumping" or "banding" effect with many of the engines where the stars start spitting out as rings instead of nicely spaced out. fields That indicates that there's a flaw in the way they're handling delays and the calculation of tweens' timing.

 

Thanks for asking about this and giving us a chance to address it.

 

Happy tweening!

[kaotix]

Thanks for thorough reply, I enjoy understanding the inner workings of the tweening engine, especially why some produce "rings" instead of random stars as I've always wondered about that.

 

It's interesting that CSS3 transitions would be built in such a limited way (as far as extensibility and amount of fine control go). I've also always found the very idea of controlling animation from a stylesheet a slightly odd concept. As animation seems to exist in a grey area between presentation and functionality, often linking the two.

[GreenSock]

Oh, don't get me started on that - I think it's ridiculous to try cramming all this behavioral logic into style sheets which are for presentation. Scripting is there for a reason - that's where behavioral logic belongs (in my opinion). It handles animation logic much better. So yeah, I totally agree with you. I shake my head when I see yet another article come out about how amazing css transitions/animations are and how they're the future.

 

Stepping off my soap box before I get going too much

[kaotix]

Perhaps a trip to speakers corner in hyde park is in order? Only then will the animation marxists listen!