There's a speed test in greensock website comparing speed with other animations libraries, JQuery or Even CSS Transitions. It's benchmarking FPS by animating hundreds/thousands of perticles.
The FPS of greensock animations outnumbered everything else. Css transitions & JQuery is not much close to greensock.
I tried searching about greensock but couldn't find much useful information. Most of them aren't explained well.
I'm still a amateur in javascript. If I try to make my own JS animations, those won't be as fast as gsap. Not even close. So it would be great to know what happens underneath the hood. How they optimize that much!
Jack (the creator of GreenSock) tells how GSAP is so fast in this forum post among other places. To recap some of the points there:
- 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.)
- 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.
- Make updates in a single update loop that's driven by requestAnimationFrame, only falling back to setTimeout() if necessary.
- Cache some important values internally for faster updates.
- 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.
There's no silver bullet that makes it fast. It just is smart in the way that it does things based on over a dozen years of experience.