jQuery Animation vs GreenSock TweenMax

Question

I encounter with a question what the cons and pros of using jquery.animate() and GreenSock TweenMax animating engines. So maybe there is any one who knows it. There is not enough information on the web, also what about the performance.

I tried to use both, jquery.animate() and tweenMax, but in some cases i prefer to use jQuery engine, in other GreenSock.

I'm trying to decide which is better, and not to jump from one to other.

Thanks in future, it's realy interesting to know which to use.

Engines:

http://jquery.com

https://www.greensock.com/gsap-js/

Jagatai

Answer 1

jQuery's fadeIn() and fadeOut() methods are quite convenient. However, if you are going for something more expressive, I would suggest you to use GSAP (GreenSock Animation Platform). jQuery animations are generally bit slow and TweenLite is significantly faster (20 times) than jQuery animation according to GreenSock.

In addition you will be getting really handy functions for animations such as reverse, bezier curve, timeshift, pause & skew etc and better hardware acceleration support on mobile devices.

Personally, I think GSAP is better but a tiny handy selector engine would have been cool.

Here is very good comparison between two.

UPDATE

HTML5 Animation Speed Test

Whittaker

Interesting, i tried search this in whole internet, but did not tried to find in GreenSock page.. :) +PLUS – Jagatai

I have read all the article which you gave me. It's realy good stuff, and i want to agree that they don't have a selector engine, so it's good to have near the GSAP a jQuery. – Jagatai

yea, it doesn't take long to get use to their tween syntax :) – Whittaker

i know this is a solid year later, but a good compromise is including the Sizzle selector engine (what jQuery uses) and then defining selectors based on this engine. It allows you to use jQuery's selector power with a much tinier footprint than bringing in the entire jQuery library. => codepen.io/GreenSock/pen/143f14a576109e1978a440d869db4e55 – Trevelyan

A bit late to this, but for anyone who is interested in comparing efficiencies across different animation platforms there's a speed test right here, and it very, very succinctly demonstrates how ridiculously superior greensock is. On my machine, 3000 dots animate faster 8x in greensock than 700 dots in jquery. Its nuts. ns2.greensock.com/js/speed.html – Ptosis

@Ptosis That's very useful tool for comparison, included it in answer. – Whittaker