CODEWITHSUNDEEP
javascriptjqueryjquery-animategsap
jedierikb
jedierikb

Reputation: 13079

JS animation architectural design for optimal performance

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?

Upvotes: 9

Views: 410

Answers (2)

jedierikb
jedierikb

Reputation: 13079

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

Upvotes: 2

Mark Knol
Mark Knol

Reputation: 10163

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.

Upvotes: 1

Related Questions