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?

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