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.

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.

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.
×