JS animation architectural design for optimal performance

Question

The performance gains of the GreenSock animation engine are pretty dramatic.

What underlying architectural decisions and trade-offs is this library making to achieve such gains? In particular, what is this engine doing different than jQuery animate?

Electrophysiology

+1 A great thing is they made it in JS aswell (I just knew for Flash AS2 and 3). I didn't know that. – Footboard

From the first link provided, the most noticeable difference between GreenSock and jQuery /from the output/ is that GreenSock uses integers, and jQuery seems to use floating point. – Globefish

Go to the greensock forums and ask Jack directly, he'll tell you exactly why its so good. – Neff

@Neff forums.greensock.com/topic/6601-architecture-overview – Electrophysiology

It would seem that this is part of the reason: #8000180 – Electrophysiology

Answer 1

great answer here from the folks at greensock:

1. Use highly optimized JavaScript across the board (this entails many things like using linked lists, local variables, quick lookup tables, inlining code, bitwise operators, leveraging prototypes instead of recreating functions/variables for each instance, etc.)
2. Engineer the structure of the platform so that it lends itself very well to high-pressure situations, minimizing function calls and making sure things are gc-friendly.
3. Make updates in a single update loop that's driven by requestAnimationFrame, only falling back to setTimeout() if necessary.
4. Cache some important values internally for faster updates.
5. For CSS transforms, we calculate matrix values and construct either a matrix() or matrix3d() when there's any rotation or skewing because our tests showed that it was faster.

More here: http://forums.greensock.com/topic/9346-how-does-greensock-perform-better-than-other-solutions-for-animation/#entry37777

Electrophysiology

Answer 2

As fast as I know from the flash version:

• its build/designed and optimized for speed, jquery is build for consistent workflow.
• Its using object pooling, aka recycling of multiple types of internal objects to minimize instantiation
• its using optimized loops for every scenario
• its using info objects to help/ state what properties are animating.
• im not sure if they use the same easing functions, but that could make difference too.

Tweenlite has a long history as tweenengine, it also has many features that are not included in jQuery.

Breda