Jump to content
GreenSock

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

GreenSock FAQs

FAQS

We've compiled a bunch of the most frequently asked questions along with their answers here. If you don't find the answer here, search the forums, or contact us.

FAQs

Where can I report a bug, feature request, or rave about my tweening adventures with GSAP?

In our support forums.

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.

Which browsers work with the JavaScript version of GSAP?

GSAP itself is pure JavaScript and should work in virtually ALL browsers. The CSSPlugin tweens css-related values and its compatibility is based on which properties you use in your tweens. GSAP wasn’t intended to solve all browser incompatibilities, but it does implement wizardry for critical features like opacity, transforms (rotation, scaleX, scaleY, skewX, skewY, x, and y), and transformOrigin so those should work in all major browsers even back to IE6. Firefox doesn’t support backgroundPositionX or backgroundPositionY, so those specific properties won’t work but backgroundPosition will for virtually all browsers. There is NOT a predetermined list of css properties that you can tween – the platform will attempt to tween ANY property you pass in. If it is numeric, it will tween it. If it isn’t numeric and it isn’t a recognized special property, CSSPlugin will just set the property to the value you provide (without tweening it). So, for example, if you try to tween to display:"inline", that isn’t a tweenable property but it will still be set accordingly during the tween, so feel free to use that to your advantage.

Is there a limit to the number of projects I can use GreenSock tools in as a “Business Green” member?

No. The commercial license that comes with “Business Green” Club GreenSock memberships applies to an unlimited number of apps/sites/software/games that your organization sells while the membership is active (see the license agreement for specifics). Please be sure, however, to get the appropriate membership level based on the number of developers associated with your organization.

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.

For how long must I maintain my membership?

You may cancel anytime. You'll simply lose access to updates to the bonus plugins/tools and if you're a Business Green member, your commercial license would expire at that point. You should keep it active as long you are selling/licensing your product to multiple end users. Work Products that you sold in the past do not suddenly fall out of compliance when your membership lapses – you just can't continue to sell products that use GreenSock tools after your membership expires. If you don't want to worry about the license expiring, you can simply get a permanent license. Oh, and we don't add any code into the members-only plugins that would make them suddenly stop working when your membership expires. They'll continue to work.

When determining the appropriate membership level, do I need to include only full-time developers? What if my company doesn’t have any?

You must include all freelancers, consultants, subcontractors, etc. in addition to full-time developers.

How much does It cost?

There are several different “Business Green” membership levels based on the number of developers that will have access to the code. All “Business Green” memberships come with the special commercial license. Please see the Club GreenSock page for pricing details.

How do I get a license?

Just sign up for a “Business Green” Club GreenSock membership at the level that corresponds to the number of developers in your organization. That’s it!

I don’t want to pay annually. Can I get a permanent license that never expires?

Absolutely. Click the "permanent" checkbox under the "Business Green" membership on the Club GreenSock page.

What if I develop a commercial product for my client who will be the one selling the product? Who needs the “Business Green” membership?

To make it easier on GreenSock customers, the policy is that the development company needs to maintain a valid “Business Green” membership. If, for example, Company A develops a Work Product that uses TweenLite/Max and sells it to Company B who will be licensing it to end users, Company A must maintain a “Business Green” membership. Company B would not be required to have a membership. If, however, Company B prefers to maintain a membership instead, that is perfectly acceptable as long as it wouldn’t reduce the club level, meaning if the development company has 20 developers and Company B has 1 developer, it wouldn’t be fair to circumvent the terms by only having Company B get a single developer membership. A 20-developer membership would be required.

Can I include GreenSock code in my open source library?

Absolutely, but there are a few caveats: You may not include any of the members-only bonus plugins/classes in your open source tool (for obvious reasons) and you must clearly represent that the GreenSock code uses its own separate licensing model. We encourage the use of GreenSock tools to empower other open source tools.

If I get an annual membership, can I upgrade to a permanent one later?

Sure. You can upgrade directly from within your GreenSock account anytime. Contact us if you need help.

Why not give the code away for free?

We firmly believe this licensing model ultimately delivers a superior end product and serves the community better. Open source projects with no funding mechanism typically stagnate and become obsolete. Our goal with this licensing model is to keep the tools extremely accessible while putting in place a mechanism that funds continued support, innovation, and bug fixes. Read The "Why" Behind the GreenSock License for details.

Who do I talk to if I have questions?

The best place to receive assistance is in our support forums. If you have a private matter to discus simply complete the form on our contact page. We will respond promptly.

Who uses GreenSock tools?

Here are just a few: Google, Microsoft, Dow, Sony, Amazon, Fox, EA, Ford, HP, Adobe, Coca-Cola. To see the great work these and other brands are creating with GreenSock tools, swing by our showcase.

Does Draggable have any dependencies on things like jQuery?

The only dependency is on GreenSock's very own TweenLite and CSSPlugin (which are also inside TweenMax). There are no dependencies on jQuery or any other libraries, although they work great together.

Does Draggable only work with DOM elements? Can I get it in a canvas-based app ?

Draggable is just for DOM elements, yes, but the real magic behind all the fluid motion and snapping is ThrowPropsPlugin, and that can be used to tween any property of any object, not just DOM elements. So yes, you can absolutely get this kind of motion in other contexts but you'd need to wire up the actual dragging logic yourself and then fire off a ThrowPropsPlugin tween when the user releases their mouse/touch. ThrowPropsPlugin can even track the velocity of any property for you too (even function-based getters/setters!), so it's quite a powerful tool.

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.

How big are the JavaScript files needed to use Draggable?

Here are the rough sizes, assuming they're gzipped and minified:
  • Draggable: 6kb
  • ThrowPropsPlugin: 3kb
  • TweenLite: 7kb
  • CSSPlugin: 12kb

Does Draggable use CSS3 animations or transitions for the motion?

Nope. CSS3 transitions and animations have some significant limitations that make them ill-suited for the type of motion that these tools require, so highly optimized JavaScript is used instead. In order to tap into GPU compositing, 3D transforms are used when possible (in browsers that support them) and updates are made using requestAnimationFrame (when available) for maximum efficiency. See for yourself in Chrome Dev Tools - you should see very snappy performance in the timeline. Many other tools like jQuery UI use top/left properties for positioning which don't generally perform as well. These tools have been fully "GreenSocked" so performance is smoking fast, just like the core tweening engine.

Do I have to purchase a license to use Draggable? Can I use it in commercial projects?

ThrowPropsPlugin is a membership benefit of Club GreenSock, so you need to sign up to get that. Draggable, however, is included in all the standard downloads and you don't need a membership to get that; Draggable can be used apart from ThrowPropsPlugin as long as you don't need the momentum-based motion. GreenSock's standard license allows you to use GreenSock tools for free in everything except a very specific type of commercial project (if you collect a fee from multiple customers for the app/product/game/site that uses GreenSock tools) which makes it extremely accessible and business-friendly while providing a small funding mechanism to sustain ongoing support, enhancement, and innovation. The web is littered with abandoned “open source” projects, but GreenSock has a years-long track record of commitment to the platform. This unique licensing model is a key component of its sustainability. If you charge multiple customers a usage/access/license fee, please simply sign up for a “Business Green” Club GreenSock membership which comes with a special commercial license granting you permission to do so. Click here for details. Joining the club also gets you members-only bonus plugins, utilities, update notifications, and more.

How big are the GSAP JavaScript files?

Here are the minified gzipped file sizes:
  • TweenLite (includes standard eases): 9kb/li>
  • CSSPlugin: 15kb
  • RoundPropsPlugin: 1kb
  • BezierPlugin: 4kb
  • EasePack: 2kb
  • TimelineLite: 4kb
  • TimelineMax (includes TimelineLite): 6kb
  • TweenMax (includes ALL of the above): 36kb

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.

Do I need to worry about garabage collection in the JavaScript version of GSAP? What happens when a tween finishes?

No need to worry. Tweens and timelines are automatically made eligible for garbage collection when appropriate (typically when they finish but if you maintain a reference to an instance so that you can restart it later, for example, it won’t be gc’d out from under you). Basically the system manages gc for you and generally cleans up after itself.

Does the GreenSock Animation Platform use the newer “requestAnimationFrame” API for its timing mechanism to maximize performance and minimize CPU load?

Yes indeed, and it falls back to a standard setTimeout() if the browser doesn’t support requestAnimationFrame. And if you prefer not to use requestAnimationFrame, you can disable it by calling TweenLite.ticker.useRAF(false). The main benefit of requestAnimationFrame is that it synchronizes animation renders with modern browsers’ redraw cycles and it also reduces the frequency of updates significantly when the user switches to another tab in the browser, reducing the load on the processor and saving battery on mobile devices.

Do I have to purchase a license to use GSAP? Can I use it in commercial projects?

GreenSock uses a very permissive license that allows you to use the tools for free for everything except a very specific type of commercial use (if you collect a fee from multiple customers for the same app/product/site that uses GreenSock tools) which makes it extremely accessible and business-friendly while providing a small funding mechanism to sustain ongoing support, enhancement, and innovation. The web is littered with abandoned “open source” projects, but GreenSock has a years-long track record of commitment to the platform. This unique licensing model is a key component of that sustainability. If multiple customers are charged a usage/access/license fee of any kind, please simply sign up for a “Business Green” Club GreenSock membership which comes with a special commercial license granting you permission to do so. Click here for details. Joining the club also gets you members-only bonus plugins, classes, update notifications, and more. Please see the licensing page for details.

Do I have to learn the GSAP API in order to use the jquery.gsap plugin? I don't want to learn another API. I love jQuery.

Nope, you don't have to worry your pretty little head about learning the GSAP API if you don't want to. Just load the plugin and animate() the way you always have. However, if you take the time to learn the native GSAP API, it could revolutionize your animation workflow in some surprising ways. If you're doing anything beyond very basic tweens, it's probably worth your time. But there's no pressure.

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 define the ease in the standard jQuery way, like "easeOutStrong" and "linear" and "swing"?

Absolutely, please do.

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.

When features get added to GSAP, will this jquery.gsap.js get updated?

The plugin is just a harness that takes whatever you give jQuery.animate() and feeds the data to GSAP under the hood, so yes, when you update your GSAP files you'll instantly get the new features.

Can I use other GSAP plugins like ScrollToPlugin with jQuery.animate() and jquery.gsap.js?

Yes, as long as you loaded the plugin you can use it. For example:
$(window).animate({scrollTo:{y:300}}, 3000);
[/code]

Is there a way to disable/enablejquery.gsap.js functionality? In other words, what iIf the jquery.gsap.js is loaded and GSAP isn't animating something properly and I want to revert to using the native jQuery.animate() method?

Yes:
//disables GSAP from all jQuery.animate() calls:
$.gsap.enabled(false);

//enables it again:
$.gsap.enabled(true);

//disables GSAP only in a particular animate() call:
$(".myClass").animate({left:100, skipGSAP:true}, 2000);

Will the bonus plugins suddenly stop working when my membership expires?

Nope. We don't inject any "phone home" code that tracks usage or causes the plugins to suddenly stop working on a certain date. Hopefully our tools prove so valuable and profitable to you that you'll gladly renew every year to keep getting access to the goodies.

Can I try the bonus plugins before I buy?

Absolutely! We would love for you to see for yourself how powerful and helpful these tools are. We created a starter template and video to show you how to use fully-functional trial versions of Club GreenSock plugins on CodePen.

Why aren't the bonus plugins hosted on a CDN?

Putting them on a CDN would remove one of the primary reasons for joining Club GreenSock, the very thing that enables ongoing support and development. Not a very good business move.

Where can I get the CDN URLs for the current version of each tool?

Check out the GSAP Overview on the docs homepage. It makes it super easy to see which tools are hosted on the CDN and copy the URLs to your clipboard. You can also get a full list at CDNJS.com.
×