Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jstafford

jquery gsap vs. just jquery

Recommended Posts

Just a general question here. When should I inlcude the jquery gsap? I have been relying on just jquery till now.

Link to comment
Share on other sites

Hello jstafford

 

The jQuery GSAP plugin basically hijacks the jQuery animate() methods animation timing mechanism. jQuery animate() uses its own setTimeout() method to animate elements, which has poor out of sync timing and performance. Whereas GSAP uses RAF (requestAnimationFrame) for a much more smooth and better performance driven animation and timing.

 

So just to recap..

  • The jQuery animate() method by it self is like churning rocks
  • The jquery-gsap-plugin makes jQuery animate() churn like creamy buttery goodness

More info in the Docs: http://greensock.com/jquery-gsap-plugin

 

But just using the methods in GSAP are much better and provide great control and precision of your animation.

 

:)

  • Like 3
Link to comment
Share on other sites

Thanks Jonathan. So, include both standard jquery and jquery.gsap (I would include the jquery.gsap after jquery so it can override any animate methods in the standard jquery plugin) ? Of course bootstrap complains about jquery being absent, but so does the GSAP plugin if I leave out the standard jquery plugin. Just want to verify here in case I may be missing these smoother animations without noticing.

Link to comment
Share on other sites

Yep so you can either load jQuery, TweenMax, and then the jquery-gsap-plugin like this:

<script src="js/jQuery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.gsap.min.js"></script>

Or If you were concerned about filesize .. then you could load TweenLite:

<script src="js/jQuery.min.js"></script>
<script src="js/plugins/CSSPlugin.min.js"></script>
<script src="js/easing/EasePack.min.js"></script>
<script src="js/TweenLite.min.js"></script> 
<script src="js/jquery.gsap.min.js"></script>

Please take a look at the below page, it goes into more depth on the usage and caveats of the jQuery-gsap-plugiin:

 

http://greensock.com/jquery-gsap-plugin

 

Of course you can use the CDN versions of the GSAP scripts above as well

 

:)

  • Like 1
Link to comment
Share on other sites

Thank you for your prompt response Jonathan. I really appreciate you, Diaco, Jack, and other members of the greensock community for all the help you have provided me in these forums. Have a great weekend.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×