Need help?

Check out the rich documentation, active forums, the FAQs, or even request premium support. We've got you covered.

Documentation

Every method and property of every tool has been documented in rich detail. And the docs completely searchable.

View the docs

Popular GSAP Docs

GSAP TweenMax Draggable SplitText Plugins Easing Animation

Forums

Get answers from experts in the community, or grow your skills by poking around and reading the discussions. Share your knowledge here too. It's a great place to get connected and find answers.

Visit the forums

Popular Forums

GSAP Banner Animation Jobs & Freelance

FAQS

Popular tags:

Licensing GSAP Club GreenSock LoaderMax Draggable General Support

Can I distribute GreenSock files as a part of my Work Product?

Yes, as long as the source files are unaltered (including copyright notices therein). Your customer may use GreenSock tools (including bonus plugins/classes you got with your membership) only as a part of your Work Product. However, if your customer wants to use the GreenSock tools outside of your Work Product (or make customizations to your Work Product) to resell to their customers, they would need to get their own "Business Green" Club GreenSock membership to cover their usage. If your Work Product is given away freely and you're not distributing members-only plugins, you're golden...er, green...er, fine.

What browsers does Draggable support?

Pretty much every major browser is supported including Chrome, Firefox, Opera, iOS, Android and IE even back to version 8! We're not aware of any significant browsers that don't work, but please let us know if you stumble across an issue.

Does the JavaScript version of GSAP use CSS3 transitions to deliver even better performance (with help from the GPU)?

CSS3 transitions have some significant limitations that make them unworkable for a serious animation platform. They don’t provide precise controls over the timing or easing. They’re great for simple effects but the GreenSock Animation Platform delivers extremely precise rendering, so you can do things like pause() and reverse() an animation anytime or skip to a specific time and play from there, etc. Try creating a CSS3 transition that uses an Elastic.easeOut or SlowMo.ease and then jump to 0.72494-seconds into a 2-second transition and pause() only to resume() later. It’s impossible from what I understand. So no, the platform doesn’t make use of CSS3 transitions. However, it is highly optimized for performance. See the detailed cage match where GSAP battles CSS3 transitions where there’s a detailed comparison in several categories.

If I already know the GSAP API, is it better to use jQuery.animate() with jquery.gsap.js or the standard GSAP methods like TweenLite.to()?

Using jQuery.animate() is fine for basic stuff, but we would definitely recommend using the native GSAP methods whenever you can because they're slightly faster (no extra parsing) and they make experimenting and building sequences much easier, plus they're object-oriented so you can pause()/resume()/reverse()/restart()/seek() individual tweens or entire timelines. You can even nest timelines within timelines.

is cabbage gross?

yes

Using jquery.gsap.js can I get the tween instances so that I can control them individually?

No, not from the animate() method - if you want to get precise control like that, please use the regular GSAP API. The jQuery.animate() method only returns a jQuery object and it taps into an internal queue system for sequencing that would get circumvented if you manually paused or reversed the tweens. The plugin is only intended to duplicate the native functionality plus add extra tweenable properties and speed things up of course.

Can I use jQuery with the GSAP?

Absolutely! jQuery is great for selecting DOM elements, adding event handlers, and lots more. GSAP treats jQuery objects like arrays, so you can pass a single jQuery object as the target of the tween (as of 1.8.0),and you can even pass a string of selector text as the target and if jQuery is loaded, GSAP will use it as the selector! For example:

//fade out all of the elements with the class "myClass"
TweenLite.to($(".myClass"), 1, {opacity:0});

//tween the width of the element with id "myElement" to 500px
TweenLite.to("#myElement", 1, {width:"500px", ease:Elastic.easeOut});

//tween the "marginTop" of all objects of the class "myClass" in a staggered fashion so that they appear to fall into place from 100px up
var tl = new TimelineLite();
tl.staggerFrom(".myClass", 1, {marginTop:"-=100px", opacity:0}, 0.1);

//or use jQuery's each() method to loop through the results and stagger a fade out
$(".myClass").each( function(index, element) {
    TweenLite.to( element, 1, {autoAlpha:0, delay:index * 0.2});
});

//add a click handler that uses $(this) to refer to the menu element that was clicked and tween its height to 100px
$("#menu").click(
     function(){
		TweenLite.to( $(this), 0.7, {height:"100px", ease:Power2.easeInOut } );
     }
);

Of course you need to load jQuery into your HTML document in order to use it. TweenLite doesn't have any dependencies on 3rd party tools like jQuery, so it is completely optional.

Can I use the JavaScript version of GSAP for canvas objects or 3rd party tools like EaselJS?

You can animate ANY numeric property of ANY JavaScript object – it’s not just for DOM elements. So yes, you can animate canvas objects, EaselJS assets, and pretty much anything JavaScript-related. In fact, GSAP even has an EaselPlugin to make it easier to animate EaselJS properties. If you need to run logic after each refresh (like to redraw things on the canvas), either use an onUpdate on the individual tween/timeline or add a “tick” event listener to the core Ticker that drives the platform.

Create an Account

Sign In