not sure if GSAP js is overriding jQuery animate

[mheavers]

Hi - I am trying to troubleshoot some animation stuttering in an app we built. I decided to include GSAP jQuery plugin to see if it would make a difference, but I'm not sure it's even being utilized over jQuery's native animate. How do I know? 

 

I include the library:

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

Then here's a typical animation call:

$(obj).stop().animate({
    rgb: 127
}, {
    duration: 2000,
    easing: (Constants.CUSTOM_EASE ? Constants.EASE : "easeOutQuart"),
    step: function() {
        var rgb = ~~ obj.rgb;
        self.drawArrow(rgb * 65536 + rgb * 256 + rgb);
    }
});

As far as judging performance, is there a good, definitive way to see which is operating faster? I have Chrome Dev Tools FPS counter open, but both platforms seem to operate mostly at 60fps in the counter, with the occasional (severe) dropoff - which is what I'm trying to solve for.

[Jonathan]

Hello mheavers, and Welcome to the GreenSock forum!

What i see happening is that you are using the jQuery animate() step function. When you use that jQuery animate reverts back to its normal native animate() function, meaning no GSAP speed boost. See below for caveats to the jQuery GSAP plugin.

 

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

 

Caveats

1. If you define any of the following in the animate() call, it will revert to the native jQuery.animate() method in order to maximize compatibility (meaning no GSAP speed boost and no GSAP-specific special properties will work in that particular call):
   • a "step" function - providing the parameters to the callback that jQuery normally does would be too costly performance-wise. One of the biggest goals of GSAP is optimized performance; We'd strongly recommend NOT using a "step" function for that reason. Instead, you can use an onUpdate if you want a function to be called each time the values are updated.
   • Anything with a value of "show", "hide", "toggle", "scrollTop" or "scrollLeft". jQuery handles these in a unique way and we don't want to add the code into CSSPlugin that would be required to support them natively in GSAP.
   • If skipGSAP:true is found in the "properties" parameter, it will force things to fall back to the native jQuery.animate() method. So if a particular animation is acting different than what you're used to with the native jQuery.animate() method, you can just force the fallback using this special property. Like $(".myClass").animate({scrollTop:200, skipGSAP:true});

If your still having an issue then, here is a video tut on how to create a codepen example.

This way we can test your code live on codepen to better help you!

Thanks!

[Carl]

Great answer, Jonathan. The step property is definitely a deal-breaker for using jQuery.gsap.min.js.

 

In addition, this tool is meant to override animations of CSS properties on DOM elements. I'm not sure what $(obj) is in your example but rgb does not appear to be a valid CSS property.

 

I'm quite certain you could remove jQuery entirely from the equation and just use GSAP. It can animate any numeric property of any JavaScript object (even function-based values). There is no requirement for using DOM elements or CSS, which is why it works so well with canvas animations. 

 

As, Jonathan suggested, if you can provide a basic CodePen demo we can help further with this.